如何通过单击按钮更改图像？

【问题标题】：How do I change an image with a button click?如何通过单击按钮更改图像？
【发布时间】：2020-12-30 10:04:03
【问题描述】：

我正在尝试通过单击 div 而不是按钮元素来更改图像 src。但它不起作用。

这是我的html：

 <figure class = "imgContainer">
<img class = "image" id = "image" src = " " alt = "activeimage">

 <div class = "buttonsContainer" id = "btctn1">
      <div class = "button" id = "btn1"></div>
      <div class = "button" id = "btn2"></div>
      <div class = "button" id = "btn3"></div>
      <div class = "button" id = "btn4"></div>
    </div>

javascript：

function setSrc() {
  let mysrc = "assets/chad.jpg";
  const img = document.getElementById("image");

  if(img != mysrc){
    img.src = msrc;
  }

 const btn1=document.getElementById("btn1");
  btn1.addEventListener("click", setSrc);

【问题讨论】：

标签： javascript button events addeventlistener

【解决方案1】：

在 javascript 中，您可以使用 div 标签上的onclick 事件来调用 javascript 函数。在函数中，创建一个图片url数组，并根据div标签发送的索引选择一个url。

试试这个代码：

<script>
function setSrc(i) {
  let mysrc = 
  [ "D:\\pics\\cubered.png",
    "D:\\pics\\cubegreen.png",
    "D:\\pics\\cubeblue.png",
    "D:\\pics\\cubeyellow.png"]
  document.getElementById("image").src = mysrc[i];
}

//const btn1=document.getElementById("btn1");
//btn1.addEventListener("click", setSrc);
</script>

<figure class = "imgContainer">
<img class = "image" id = "image" src = " " alt = "activeimage">
 <div class = "buttonsContainer" id = "btctn1">
      <div class = "button" id = "btn1" onclick=setSrc(0)>BTN 1</div>
      <div class = "button" id = "btn2" onclick=setSrc(1)>BTN 2</div>
      <div class = "button" id = "btn3" onclick=setSrc(2)>BTN 3</div>
      <div class = "button" id = "btn4" onclick=setSrc(3)>BTN 4</div>
    </div>
    
<script>setSrc(0);</script>

【讨论】：