Javascript 为什么按钮必须点击两次才能工作？

我是新的编程，我想写的东西有3个按钮来控制3隐藏图像的显示分别。当我单击第一个按钮时，图像立即出现，但必须单击两次才能显示第二个图像。 有人能帮忙吗

我用这种方式有三个按钮

<input type="image" img src="1.png" id="a1" href="javascript:;" onclick="change()">
<input type="image" img src="2.png" id="a12" href="javascript:;" onclick="change2 ()">
<input type="image" img src="3.png" id="a13" href="javascript:;" onclick="change3 ()">

3默认为“显示：无”的图像

下面是javascript部分

<script>
var isShow = false;
function change() {
if(!isShow) {
    isShow = true;
    document.getElementById('d1').style.display='';

}
else  
{document.getElementById('d1').style.display='none';

}

function change2 () {
if(!isShow) {
    isShow = true;
    document.getElementById('d2').style.display='';


}
else {
    isShow = false;
    document.getElementById('d2').style.display='none';

}
}


function change3 () {
if(!isShow) {
    isShow = true;
    document.getElementById('d3').style.display='';


}
else {
    isShow = false;
    document.getElementById('d3').style.display='none';

}
}
</script>

var isShow=假；
函数更改（）{
如果（！isShow）{
isShow=true；
document.getElementById（'d1'）.style.display=''；
}
其他的
{document.getElementById（'d1'）.style.display='none'；
}
功能更改2（）{
如果（！isShow）{
isShow=true；
document.getElementById（'d2'）。style.display=''；
}
否则{
isShow=假；
document.getElementById（'d2'）.style.display='none'；
}
}
功能更改3（）{
如果（！isShow）{
isShow=true；
document.getElementById（'d3'）.style.display=''；
}
否则{
isShow=假；
document.getElementById（'d3'）.style.display='none'；
}
}

---

任何建议都将不胜感激

可变因素是罪魁祸首是谁

根据您的逻辑，当调用change（）方法时，isShow的值变为“true”

因此，在其他两种方法中，执行总是在第一次单击时转到“else”部分，而isShow变为“false”。因此，您必须再次单击

---

既然您正在尝试学习，我就让您考虑另一种方法。

为了每个对象只处理一个条件，sou可以在每个对象上附加一个，比如说，

“显示的”

，然后使用它。让我们做一个例子，与第一个按钮相关，但对于其他两个按钮，情况完全相同

document.getElementById('d1')['displayed'] = false;

function change() {
    var isShow = document.getElementById('d1')['displayed'];
    if(!isShow) {
            document.getElementById('d1').style.display='';
            document.getElementById('d1')['displayed'] = true;
    }
    else {
            document.getElementById('d1').style.display='none';
            document.getElementById('d1')['displayed'] = false;         
    }
}

---

但这是一种教学方法，正如xEterno提到的，您应该熟悉jquery。

因为您是编程新手，请尝试以下方法：

我重新编写了您的函数，只需使用一个函数，iam将传递要显示/隐藏的元素的id。与其检查全局布尔值（true/false），不如检查元素是否隐藏：

function change(ids) {
var elem = document.getElementById(ids);
if(elem.style.display =='none') {
    elem.style.display='';
}
else{
    elem.style.display='none';
}

}

DOM:

<input type="image" img src="1.png" id="a1" href="javascript:;" onclick="change('d1')">
<input type="image" img src="2.png" id="a12" href="javascript:;" onclick="change('d2')">
<input type="image" img src="3.png" id="a13" href="javascript:;" onclick="change('d3')">

---

根据@xEterno的建议，您可以使用jQUery实现这一点。

如何实现？有没有更好的写入方法，那么它就不会受到其他条件的影响？因为您的var isShow对所有三个函数都是全局可用的。肯定有更好的方法可以做到这一点，因为所有函数的功能都是相同的谢谢，因为我不知道如何使用jquery。我会研究的