Fatal编程技术网

JavaScript切换行为不起作用

javascript html

JavaScript切换行为不起作用,javascript,html,Javascript,Html,我试图用JavaScript创建一个简单的切换按钮，而其他部分不起作用。灯刚亮，然后就停止工作了。我如何解决这个问题 <!DOCTYPE html> <html> <body> <button onclick="toggleBulb()">Turn on/off</button> <img style="margin-left:43%;border:1px solid rgb(50, 50, 50);padding: 20px

我试图用JavaScript创建一个简单的切换按钮，而
其他部分
不起作用。灯刚亮，然后就停止工作了。我如何解决这个问题

<!DOCTYPE html>
<html>
<body>

<button onclick="toggleBulb()">Turn on/off</button>

<img style="margin-left:43%;border:1px solid rgb(50, 50, 50);padding:
20px;" id='light' src='../Media/lighton.gif'>

<script>
function toggleBulb() {
    var doc = document.getElementById('light')
    if (doc.src == '../Media/lightoff.gif') {
        doc.src = '../Media/lighton.gif'
    } else if (doc.src == '../Media/lighton.gif') {
        doc.src = '../Media/lightoff.gif'
    }
}
</script>

</body>
</html>


打开/关闭
函数toggleBulb（）{
var doc=document.getElementById（'light'）
如果（doc.src=='../Media/lightoff.gif'）{
doc.src=“../Media/lighton.gif”
}else if（doc.src=='../Media/lighton.gif'）{
doc.src='../Media/lightoff.gif'
}
}
正如我在评论中提到的，
src
是基于该文件所在网站的完整路径。相反，您可以做的另一件事是检查
src
是否以您要查找的字符串结尾：

function toggleBulb() {
    var doc = document.getElementById('light')
    if (doc.src.endsWith('/Media/lightoff.gif')) {
        doc.src = '../Media/lighton.gif'
    } else if (doc.src.endsWith('/Media/lighton.gif')) {
        doc.src = '../Media/lightoff.gif'
    }
}
或者您可以检查/设置完整路径。也不能将
else if
变成一个
else
，除非您计划添加更多的逻辑

这是属性和属性之间的区别。属性是HTML中可以在标记中看到的文本，但它并不总是与同名属性相同。在这种情况下，属性
src
是由
src
属性表示的经过计算的URL。您会注意到，在我的演示中，我有一个以
/
开头的
src
属性，它告诉浏览器对该资源使用与页面匹配的当前页面协议。由于此stackoverflow页面安装了SSL，因此计算属性具有协议的https://。最后，在比较属性时应该使用


打开/关闭
函数toggleBulb（）{
var doc=document.getElementById（'light'）；
if（doc.getAttribute（'src'）='//placehold.it/100/000/FFF？text=OFF'）{
doc.src='//placehold.it/100/FF0/000？text=ON'
}else if（doc.getAttribute（'src'）='//placehold.it/100/FF0/000？text=ON'）{
doc.src='//placehold.it/100/000/FFF？text=OFF'
}
}
正如其他人所说，您正在检查
src
属性是否完全匹配，但该属性将始终返回完整的URL，并且您没有针对完整的URL进行测试，因此您永远不会获得匹配

但是，与其他答案不同，最好使用检查图像源字符串，查看它是否包含子字符串。那么，您获得的源代码值（
src
属性或完整路径）就无关紧要了
.indexOf（）
返回子字符串的索引位置，如果找不到，则返回-1

另外，可以使用JavaScript的简化
if/then
：


打开/关闭
函数toggleBulb（）{
var doc=document.getElementById（'light'）；
//如果源包含“lightoff”，则将其设置为“lighton”，否则将其设置为“lightoff”
doc.src=doc.src.indexOf（'../Media/lightoff.gif'）>-1？“../Media/lighton.gif”：doc.src；
}
您必须在比较图像的每个地方编写完整的代码。另外，
doc.src
返回一个字符串，表示图像的URL，包括协议，如-（此处为图像的完整路径）。 如果您的代码在本地主机上运行，那么file:///now 这里是图像的完整路径。）我在代码中添加了这个，它将正确运行

<!DOCTYPE html>
<html>
<body>

<button onclick="toggleBulb()">Turn on/off</button>

<img style="margin-left:43%;border:1px solid rgb(50, 50, 50);padding: 20px;" id='light' src='**insert your full path of image here**'>

<script>
function toggleBulb() {
    var doc = document.getElementById('light');


   if (doc.src== "file:///insert your full path of image here") 
    {
       doc.src='insert your full path of image here';

    } 
    else if (doc.src == "file:///insert your full path of image here") {
        doc.src='full path of image here';

    }
}
</script>

</body>
</html>


打开/关闭
函数toggleBulb（）{
var doc=document.getElementById（'light'）；
如果（doc.src==”file:///insert 您的完整图像路径在此）
{
doc.src='在此处插入图像的完整路径'；
} 
否则如果（doc.src==”file:///insert 您的完整图像路径在此）{
doc.src='此处图像的完整路径'；
}
}
因为
src
永远不是
'../Media/lighton.gif'
的值。实际值被解释为完整路径，因此不会影响任何条件。您应该检查src是否包含“lightoff.gif”或“lighton.gif”图像。您可以使用indexOf来实现这一点。这是因为src总是返回完整路径而不是相对路径，并且，一旦您纠正了这一点，您就不需要
else if（）
，只需要
else
。确实不需要
else if（）
。只要一个
else
就可以了。@ScottMarcus只是作为注释添加了它。只是一个注释：旧浏览器（这是一个比我的更好的答案，我建议改为
.getAttribute（'src'））
将给出OP想要的确切值。谢谢，伙计！工作得很好！因为我们有一个用户否决了所有投票，因为他们认为这是一个糟糕的问题，不管答案是好是坏（
+1
）。不幸的是，像这样滥用否决票的用户更常见。