Question

单击每个按钮名称时，无法更改图像。有人知道我的代码有什么问题吗？

这不是让我将代码放在描述中。

      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hmwk02</title>
</head>
<body>
    <h1>Octocats</h1>
        <img id="octocats" src= "https://octodex.github.com/images/original.png" alt="octocat" width="150"/>
       <div id="buttons"></div>

       <script>
       let names= ["Castello", "Grinchtocat", "Mummytocat", "Adventure-Cat"]; 
       let urls= ["https://octodex.github.com/images/catstello.png",
                  "https://octodex.github.com/images/grinchtocat.gif",
                  "https://octodex.github.com/images/mummytocat.gif",
                  "https://octodex.github.com/images/adventure-cat.png"];
        let lines = "";
        for(let i = 0; i< names.length; i++){
            lines += '<button onlick="showPicture(' + i +')">' + names[i] + '</button><br/>'
        }
        document.getElementById("buttons").innerHTML = lines;
            console.log(lines);
       </script>
       <script src="octocats.js"></script>
</body>

function showPicture(i) {
    document.getElementById("octocat").src = urls[i];
console.log(i);
}

Answer 1

除了语法错误之外，您的代码还不错，您在按钮标签中拼写了onclick，并且拼写了图片的ID-应该为document.getElementById("octocats")而不是document.getElementById("octocat")

更正的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hmwk02</title>
</head>
<body>
    <h1>Octocats</h1>
        <img id="octocats" src= "https://octodex.github.com/images/original.png" alt="octocat" width="150"/>
       <div id="buttons"></div>

       <script>
       let names= ["Castello", "Grinchtocat", "Mummytocat", "Adventure-Cat"]; 
       let urls= ["https://octodex.github.com/images/catstello.png",
                  "https://octodex.github.com/images/grinchtocat.gif",
                  "https://octodex.github.com/images/mummytocat.gif",
                  "https://octodex.github.com/images/adventure-cat.png"];
        let lines = "";
        for(let i = 0; i< names.length; i++){
            lines += '<button onclick="showPicture(' + i +')">' + names[i] + '</button><br/>'
        }
        document.getElementById("buttons").innerHTML = lines;
            console.log(lines);
       </script>
       <script>
       function showPicture(i) {
          document.getElementById("octocats").src = urls[i];
        console.log(i);
}</script>
</body>

工作码笔：https://codepen.io/anon/pen/YBYxgr

Answer 2

使用for loop的替代方法是 map() names数组，而只需使用 createElement() 为<button>数组中的每个项目创建带有点击监听器的新names元素的方法（您应避免使用内联on *处理程序（onclick，oninput等），而应使用ID和事件监听器）

检查并运行以下代码段，以获取上述内容的实际示例：

let names= ["Castello", "Grinchtocat", "Mummytocat", "Adventure-Cat"];
let urls= ["https://octodex.github.com/images/catstello.png", "https://octodex.github.com/images/grinchtocat.gif", "https://octodex.github.com/images/mummytocat.gif", "https://octodex.github.com/images/adventure-cat.png"];

names.map((e, i) => { // add function to each element in "names" array
  let name = document.createElement("button"); // create <button> element for each item in "names" array
  name.id = i; // assign respective index as id of each element
  name.textContent = e; // assign item string as button text content
  name.addEventListener("click", () => document.getElementById("octocats").src = urls[i]); // add click listener to each <button> that changes image src on click
  document.getElementById("buttons").appendChild(name); // append the <button> elements to your `#buttons` div.
});

<h1>Octocats</h1>
<img id="octocats" src= "https://octodex.github.com/images/original.png" alt="octocat" width="150"/>
<div id="buttons"></div>

如何使用onclick按钮更改图像

2 个答案: