Question

我将有5个图像和5个按钮，目前只有单个按钮。单击按钮时，我只想显示与按钮关联的图像。为此，我想编写单个函数，将图像路径作为参数。我是JavaScript的新手，Bellow是我发现并编辑的代码：

<script>
    function pictureChange(path) {
        console.log(path);
        document.getElementById("theImage").src=path;
    }
</script>
<body>
    <img id="theImage" src="http://31.media.tumblr.com/18b5f8f0a00ad01e50f7ae2f513be52d/tumblr_msqcl4iwM01soh1p8o1_500.png">
    <p><input type="button" id="theButton" value="click me!" onclick="pictureChange("http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png")"></p>
</body>

Answer 1

当前代码中的问题是，当您在函数中传递字符串时，您需要使用反转逗号的序列。例如，当使用“”时，你只能在其中使用''单个倒置逗号。

<script>
function pictureChange(path) {
console.log(path);
document.getElementById("theImage").src=path;
}
</script>
<body>
<img id="theImage" src="http://31.media.tumblr.com/18b5f8f0a00ad01e50f7ae2f513be52d/tumblr_msqcl4iwM01soh1p8o1_500.png">
<p><input type="button" id="theButton" value="click me!" onclick="pictureChange('http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png')"></p>
</body>

显示5张图片，也可以使用单个按钮。根据您的要求，您可以创建图像源阵列并在按钮上单击传递索引，并且您可以执行与当前片段相同的操作，即在按钮上传递源然后按

此外，对于单个按钮，您可以做的是传递图像src并在数组中找到该src索引的索引，从该索引更改为下一个索引并将源指定给图像元素。 请确保检查您是否在最后一个索引而不是src，0索引将被分配，否则您将陷入错误。

更新后的代码段：css 显示：inlne-block 属性会对您有所帮助。你还需要改变图像的宽度，因为默认情况下它是

img { width:85%; } p { display: inline-block; }

<script> function pictureChange(path) { console.log(path); document.getElementById("theImage").src=path; } </script> <body> <img id="theImage" src="http://31.media.tumblr.com/18b5f8f0a00ad01e50f7ae2f513be52d/tumblr_msqcl4iwM01soh1p8o1_500.png"> <p><input type="button" id="theButton" value="click me!" onclick="pictureChange('http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png')"></p> </body>

Answer 2

现在它正在工作，你的“”混淆了浏览器，因为你无法使用相同的字符串嵌套，你必须在嵌套时替换“和”

function pictureChange(path) {
console.log(path);
document.getElementById("theImage").src=path;
}

<img id="theImage" src="http://31.media.tumblr.com/18b5f8f0a00ad01e50f7ae2f513be52d/tumblr_msqcl4iwM01soh1p8o1_500.png">
<p><input type="button" id="theButton" value="click me!" onclick="pictureChange('http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png')"></p>

Answer 3

使用符号"时出错。在onclick函数内pictureChange你有符号"，然后html抛出语法错误。

您需要使用符号'更改"

onclick="pictureChange('http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png')"

祝你好运！

Answer 4

到目前为止您的代码

的当前错误

onclick="pictureChange('http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png')"

你对报价感到困惑。如果外部引号是双引号，请用单引号括起来。

目前只有单个按钮。单击按钮时，我只想显示与按钮关联的图像。

只是为了使它更通用，也传递图像ID。

function pictureChange(imgid,path) {
console.log(path);
document.getElementById(imgid).src=path;
}

您可以将其用作

onclick="pictureChange('theImage','http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png')"

使用多个按钮更改HTML中的图片

4 个答案: