gpt4 book ai didi

javascript - document.getElementById ('rockImg' ).src == "rock.png"似乎没有在 if() block 中执行

转载 作者:行者123 更新时间:2023-11-29 17:53:21 25 4
gpt4 key购买 nike

我刚刚开始学习javascript。我想用下面的代码做的是当我点击 id rockImg 的图像时切换两个图像。

我通过一条 document.getElementById('rockImg').src = "rock_happy.png"; 语句成功地将一个更改为另一个但无法通过单击图像来交换两个图像。

据我所知,if-else语句语法没有任何错误;为了确保这一点,我引用了这个网站:https://msdn.microsoft.com/en-us/library/85yyde5c(v=vs.94).aspx .

问题出在比较语句上吗?因为它仅在使用 ocument.getElementById('rockImg').src = "rock_happy.png" 运行时才能正常工作,这是我能想到的唯一情况。

<html>
<head>
<title>iRock - The Virtual Pet Rock</title>
<script>
function change(){
// alert('yay! it changed!')
if(document.getElementById('rockImg').src == 'rock.png'){
document.getElementById('rockImg').src = "rock_happy.png";
}
else{
document.getElementById('rockImg').src = "rock.png";
}
}
</script>
</head>

<body>
<div style="margin-top:100px; text-align:center;">
<img id="rockImg" src="rock.png" alt="iRock" onclick="change()"/>
</div>
</body>

最佳答案

src 属性始终返回整个图像 URL,而不是相对路径,因此 if 条件始终会失败。

使用setAttributegetAttribute而是获取准确的属性值

function change(){
var img = document.getElementById('rockImg');
if(img.getAttribute('src') == 'rock.png'){
img.setAttribute('src', "rock_happy.png");
}
else{
img.setAttribute('src', "rock.png");
}
}

您可以使用 ternary operator 减少代码行数而不是if...else声明。

function change(){
var img = document.getElementById('rockImg');
img.setAttribute('src',img.getAttribute('src') == 'rock.png' ? "rock_happy.png" : "rock.png");
}

关于javascript - document.getElementById ('rockImg' ).src == "rock.png"似乎没有在 if() block 中执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41327000/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com