Question

我为下周即将到期的作业做这件事。我们的教练希望我们创建图像翻转。我已经创建了一个，但它不会起作用。这是我的代码：

<script>
function turnSwitchOn(img) {
    buttonImg="lab11-1switchon.jpg"
    document.getElementById(lightswitch).src=buttonImg
}
function turnSwitchOff(img) {
    buttonImg="lab11-1switchoff.jpg"
    document.getElementById(lightswitch).src=buttonImg
}
</script>

以及img：

<img src="lab11-1switchoff.jpg" alt="light switch" id="lightswitch" onMouseOver="turnSwitchOn()" onMouseOut="turnSwitchOff()" />

我网站上的图片无法更改为我在Javascript代码中添加的图片，为什么会这样？

Answer 1

您的Id必须在引号中

function turnSwitchOn(img) {
    buttonImg="lab11-1switchon.jpg"
    document.getElementById("lightswitch").src=buttonImg
}
function turnSwitchOff(img) {
    buttonImg="lab11-1switchoff.jpg"
    document.getElementById("lightswitch").src=buttonImg
}

Answer 2

除了确保使用字符串（“lightswitch”）调用getElementById的修复程序之外，如果将this传递给函数，您可以获得更好的内容甚至不必通过id查找图像：

<script>
function turnSwitchOn(img) {
    img.src="lab11-1switchon.jpg"
}
function turnSwitchOff(img) {
    img.src="lab11-1switchoff.jpg"
}
</script>

<img src="lab11-1switchoff.jpg" alt="light switch" id="lightswitch" onMouseOver="turnSwitchOn(this)" onMouseOut="turnSwitchOff(this)" />

使用Javascript进行图像翻转

2 个答案: