Javascript 如何使用onclick按钮更改图像_Javascript_Html_Arrays_Onclick

Javascript 如何使用onclick按钮更改图像

javascript html arrays

Javascript 如何使用onclick按钮更改图像,javascript,html,arrays,onclick,Javascript,Html,Arrays,Onclick,单击每个按钮名称时，我无法更改图像。有人知道我的代码有什么问题吗它不允许我在描述中输入代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hmwk02</title> </head> <body> <h1>Octocats</h1> <img

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

它不允许我在描述中输入代码

      <!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);
}


Hmwk02
章鱼
让名字=[“卡斯特罗”、“格林特卡特”、“木乃伊猫”、“冒险猫”]；
让URL=[”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"];
让线=”；
for（设i=0；i
}
document.getElementById（“按钮”）.innerHTML=行；
控制台日志（行）；
功能展示图片（一）{
document.getElementById（“octocat”）.src=URL[i]；
控制台日志（i）；
}

除了语法错误之外，您的代码没有问题，您在按钮标签中单击了一次，拼写错误了

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>


Hmwk02
章鱼
让名字=[“卡斯特罗”、“格林特卡特”、“木乃伊猫”、“冒险猫”]；
让URL=[”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"];
让线=”；
for（设i=0；i
}
document.getElementById（“按钮”）.innerHTML=行；
控制台日志（行）；
功能展示图片（一）{
document.getElementById（“octocats”）.src=URL[i]；
控制台日志（i）；
}

工作代码笔：

使用

for循环

的一种替代方法是使用

名称

数组，只需使用方法为

名称

数组中的每个项目创建一个新的

元素，并使用click、oninput等内联on*处理程序并改用ID和事件侦听器）

检查并运行以下代码片段，以获取我上面描述的实际示例：

let names=[“卡斯特罗”、“格林特卡特”、“木乃伊猫”、“冒险猫”]；
让URL=[”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"];
map（（e，i）=>{//add函数到“names”数组中的每个元素
让name=document.createElement（“按钮”）；//为“names”数组中的每个项创建元素
name.id=i；//将各自的索引指定为每个元素的id
name.textContent=e；//将项字符串指定为按钮文本内容
name.addEventListener（“click”，（）=>document.getElementById（“octocats”）.src=URL[i]）；//将click listener添加到每个在单击时更改图像src的文件中
document.getElementById（“buttons”）.appendChild（name）；//将元素附加到`#buttons`div。
});
章鱼猫

将您的代码放入说明中，选择所有代码，然后按“ctr-k”thankyou@JulianSilvestri