如何用一个按钮调用两个函数答案

【问题标题】：how to call two functions with a single button如何用一个按钮调用两个函数
【发布时间】：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>

【问题讨论】：

标签： javascript html function button nested

【解决方案1】：

调用两个函数只需使用分号将它们分开即可。例如：

function myFunction() {
  setImage();
  setCaption();
}

在您的情况下，这会稍微困难一些，因为您正在更新图像并且需要在某处存储该 src 图像 URI 和标题。

理想情况下，您想开始考虑将内联 JS 和 HTML 分开。 Separation of concerns 很有用，因为它使编写、理解和维护代码变得更加容易。

在这个例子中，我将 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>

进一步阅读

【讨论】：

【解决方案2】：

在您的 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>

【讨论】：