如何用一个按钮调用两个函数
如何用一个按钮调用两个函数
提问于 2019-11-03 12:12:34
我尝试用javascript按钮更改图像和文本。我可以一次更改图像或文本，但不能同时更改两者。请帮帮忙。
这就是我试过的
function myFunction(name) {
document.getElementById("2").innerHTML = "SDMC " + name;
}<html>
<body>
<img class="img-1006" id="1" src="https://2.bp.blogspot.com/-lsb_v-7rE5c/XaSceQO2x9I/AAAAAAAAO5w/W-3M-Ccg6RYq73bBV7ihp7OdYzkNrIPmwCLcBGAsYHQ/s320/images%2B%25281%2529.png" style="height: 500px;" />
<h1 class="textblock-4" id="2"> MEMBER</h1>
<button class="btn-1" onclick="document.getElementById('1').src='https://2.bp.blogspot.com/-lsb_v-7rE5c/XaSceQO2x9I/AAAAAAAAO5w/W-3M-Ccg6RYq73bBV7ihp7OdYzkNrIPmwCLcBGAsYHQ/s320/images%2B%25281%2529.png' ">gggggggg </button> <button class="btn-1" onclick="myFunction('kkkkkkkkkk')">gggggggg </button>
<button class="btn-2" onclick="document.getElementById('1').src='https://1.bp.blogspot.com/-XvSuPCgIHrc/Xb67ueOGjeI/AAAAAAAAPL8/T4F2rs5nIkA1A_UIi7oBCvevmIl0g5pVQCLcBGAsYHQ/s1600/download.jpg'">computer</button> <button class="btn-2" onclick="myFunction('yyyyyyyyy')">computer</button>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-11-03 12:20:36
在onclick中，在调用之间添加任意多个函数调用，并加上";“。就像你在编写一个又一个调用函数的代码。
function myFunction(name)
{
document.getElementById("2").innerHTML = "SDMC " + name;
}<html>
<body>
<img class="img-1006" id="1" src="https://2.bp.blogspot.com/-lsb_v-7rE5c/XaSceQO2x9I/AAAAAAAAO5w/W-3M-Ccg6RYq73bBV7ihp7OdYzkNrIPmwCLcBGAsYHQ/s320/images%2B%25281%2529.png" style="height: 500px;" />
<h1 class="textblock-4" id="2"> MEMBER</h1>
<button class="btn-1" onclick="document.getElementById('1').src='https://2.bp.blogspot.com/-lsb_v-7rE5c/XaSceQO2x9I/AAAAAAAAO5w/W-3M-Ccg6RYq73bBV7ihp7OdYzkNrIPmwCLcBGAsYHQ/s320/images%2B%25281%2529.png'; myFunction('kkkkkkkkkk') ">gggggggg </button>
<button class="btn-2" onclick="document.getElementById('1').src='https://1.bp.blogspot.com/-XvSuPCgIHrc/Xb67ueOGjeI/AAAAAAAAPL8/T4F2rs5nIkA1A_UIi7oBCvevmIl0g5pVQCLcBGAsYHQ/s1600/download.jpg';myFunction('yyyyyyyyy') ">computer</button>
</body>
</html>
Stack Overflow用户
发布于 2019-11-03 13:03:30
调用两个函数只是使用分号分隔它们的问题。例如：
function myFunction() {
setImage();
setCaption();
}在您的示例中，这要稍微困难一些，因为您正在更新一个图像，需要将该src图像URI和标题存储在某个地方。
理想情况下，您希望开始考虑分离内联JS和HTML。分离关注点很有用，因为它使编写、理解和维护代码更加容易。
在本例中，我将JS从HTML中分离出来，使标记更易于阅读。有一个容器(更新的图像和标题将在其中)，以及数据属性中由id标识的几个按钮(为了方便起见，我称它们为“计算机”和“成员”)。
图像和标题信息现在存储在一个名为dict的JS对象中。它包含由键(“计算机”和“成员”)标识的两个对象，其中包含相应的数据。
这些元素被缓存，给出的按钮点击监听器。单击它们时，它们会调用swap函数。
swap从单击按钮中获取id，并使用它调用getHTML，以便从字典对象获得正确的容器HTML。HTML作为字符串返回，容器HTML也随之更新。
// The dictionary is an object that contains
// objects for each img/caption type
const dict = {
member: {
img: 'https://2.bp.blogspot.com/-lsb_v-7rE5c/XaSceQO2x9I/AAAAAAAAO5w/W-3M-Ccg6RYq73bBV7ihp7OdYzkNrIPmwCLcBGAsYHQ/s320/images%2B%25281%2529.png',
caption: 'kkkkkkkkk'
},
computer: {
img: 'https://1.bp.blogspot.com/-XvSuPCgIHrc/Xb67ueOGjeI/AAAAAAAAPL8/T4F2rs5nIkA1A_UIi7oBCvevmIl0g5pVQCLcBGAsYHQ/s1600/download.jpg',
caption: 'yyyyyyyyy'
}
};
// Cache the container and buttons
const container = document.querySelector('.container');
const buttons = document.querySelectorAll('.button');
// Add click listeners to the buttons
buttons.forEach(button => button.addEventListener('click', swap, false));
// Grabs the img and caption information from the
// dictionary using the id, and return a template literal
// describing the HTML you want to display
function getHTML(id) {
const { [id]: { img, caption } } = dict;
return `<img src="${img}" /><h3>SDMC ${caption}</h3>`;
}
// Grab the id from the element and set the container
// HTML to the returned HTML string from `getHTML`
function swap() {
const { dataset: { id } } = this;
container.innerHTML = getHTML(id);
}.container { margin-top: 1em; }<html>
<body>
<button class="button" data-id="member">Member</button>
<button class="button" data-id="computer">Computer</button>
<div class="container"></div>
</body>
</html>
进一步阅读
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58680037
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号