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

我将要有5个图像和5个按钮，目前只有单个按钮。点击按钮时，我只想显示与该按钮关联的图像。为此我想写一个函数来获取图像路径作为参数。我是很新的JavaScript中，贝娄是我发现和编辑有点代码：使用多个按钮更改HTML中的图片

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

来源

2017-08-21 SpaceMan

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

<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在0索引将被分配，否则你会卡住的错误。

更新片段：css 显示：in-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>

来源

2017-08-21 08:59:58

非常感谢，现在是工作！我怎么能把按钮放在图像的右上方而不是它的下方？ – SpaceMan

检查更新片段 –

嘿chauhan，谢谢，但上次剪断没有很好地工作。我想保留图片的原始尺寸，只需将图片旁边的按钮放在右上角。 – SpaceMan

现在，它的工作，你的“”被混淆了浏览器，因为你可以用相同的字符不窝，你必须交替“和”当你窝

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>

来源

2017-08-21 09:00:36

ü错使用符号"。里面onclick函数pictureChange你有符号"然后html抛出语法错误。

u需要使用符号'改"

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

祝你好运！

来源

2017-08-21 09:02:15

当前出错到目前为止你的代码

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')"

来源

2017-08-21 09:04:09

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

回答

相关问题