Question

我尝试使用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>

Answer 1

调用两个函数仅是使用分号将它们分开的问题。例如：

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

在您的情况下，这有点困难，因为您要更新图像，并且需要将该src图像URI和标题存储在某个地方。

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

在此示例中，我将JS与HTML分离开来，使标记更易于阅读。有一个容器（更新后的图像和标题将进入该容器），还有几个由data属性中的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>

进一步阅读

Answer 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>

如何用一个按钮调用两个功能

2 个答案: