Javascript 如何将getElementbyId变量分配给html代码
我有一张戴帽子的人的照片。 我有«master.png»的帽子图像(它本身)在这个图像上,每当用户点击下面的不同色样时,它就会变成不同的图像(相同的帽子/不同的颜色) javascript函数可以工作,但我无法将颜色变量值分配给样例。因此,无论单击哪个样例,都只会显示最后列出的js src图像。 我也不确定我的javascript变量代码是否正确 我在网上找不到任何关于如何做到这一点的信息。 请帮忙 代码如下:Javascript 如何将getElementbyId变量分配给html代码,javascript,variables,getelementbyid,Javascript,Variables,Getelementbyid,我有一张戴帽子的人的照片。 我有«master.png»的帽子图像(它本身)在这个图像上,每当用户点击下面的不同色样时,它就会变成不同的图像(相同的帽子/不同的颜色) javascript函数可以工作,但我无法将颜色变量值分配给样例。因此,无论单击哪个样例,都只会显示最后列出的js src图像。 我也不确定我的javascript变量代码是否正确 我在网上找不到任何关于如何做到这一点的信息。 请帮忙 代码如下: <script type="text/javascript"> func
<script type="text/javascript">
function hat(color)
{
var color = ['redhat', 'bluehat', 'blackhat'];
document.getElementById("master").src="images/redhat.png";
document.getElementById("master").src="images/bluehat.png";
document.getElementById("master").src="images/blackhat.png";
}
</script>
<img id="hat" src="images/manwearinghat.png" width="100%" class="center">
<img id="master" src="images/masterhat.png" width="100%" alt=" " name="master">
<img src="images/swatchs/redswatch.png" width="69" height="69" onclick="hat('redhat');" value="redhat" style="z-index:3">
<img src="images/swatchs/blueswatch.png" width="69" height="69" onclick="hat('bluehat');" value="bluehat" style="z-index:3">
<img src="images/swatchs/blackhat.png" width="69" height="69
" onclick="hat('blackhat');" style="z-index:3">
功能帽(彩色)
{
var color=['redhat','bluehat','blackhat'];
document.getElementById(“master”).src=“images/redhat.png”;
document.getElementById(“master”).src=“images/bluehat.png”;
document.getElementById(“master”).src=“images/blackhat.png”;
}
您可以使用如下简单的方法:
function hat(color) {
document.getElementById("master").src = "images/" + color + ".png";
}
因为您已经传递了颜色的名称,所以您需要做的就是
function hat(color) {
document.getElementById("master").src = "images/" +color+".png";
}
更改图像。此代码不是很紧凑,但可以正常工作。 HTML:
Javascript:
function hat(color){
if (color == 'bluehat'){
document.getElementById('picture').innerHTML=<img id="master"
src="images/bluehat.png" width="100%" alt=" " name="master">
if (color == 'blackhat'){
document.getElementById('picture').innerHTML=<img id="master"
src="images/blackhat.png" width="100%" alt=" " name="master">
if (color == 'redhat'){
document.getElementById('picture').innerHTML=<img id="master" src="images/redhat.png"
width="100%" alt=" " name="master">
};
功能帽(彩色){
如果(颜色=‘蓝帽子’){
document.getElementById('picture').innerHTML=
如果(颜色='blackhat'){
document.getElementById('picture').innerHTML=
如果(颜色='redhat'){
document.getElementById('picture').innerHTML=
};
是的,但它不再识别它们。我以前的代码更长,但仍然有效。问题(我想)正在将每个色样链接到函数中的颜色图像。我感觉我的html img部分缺少一些代码。或者我的变量代码完全关闭。请在图像上设置之前检查生成的src文本。您可以使用firebug或类似工具进行此操作。它应该是“images/redhat.png”而不是“images/'redhat.png”如果将redhat作为颜色传递给函数。
function hat(color){
if (color == 'bluehat'){
document.getElementById('picture').innerHTML=<img id="master"
src="images/bluehat.png" width="100%" alt=" " name="master">
if (color == 'blackhat'){
document.getElementById('picture').innerHTML=<img id="master"
src="images/blackhat.png" width="100%" alt=" " name="master">
if (color == 'redhat'){
document.getElementById('picture').innerHTML=<img id="master" src="images/redhat.png"
width="100%" alt=" " name="master">
};