Why the button have to click twice to work?

Question

I am new to the programming, I wanna wrote something have 3 button to control the display of 3 hidden image respectively. When I click the first button the image appear immediately, but it has to be click twice to show the second image. Can anyone help?

I have 3 button in this way

<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 image which is default "display: none"

and below javascript part

<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>

any advice would be appreciated

Answer 1

So as to deal with only one condition per object, sou could attach a property , say, 'displayed' to each of them and then work with it. Let do an example, related to the first button, but it would be exactly the same thing for the two others

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;         
    }
}

But this is pedagogical, and as xEterno mentions, you should familiarize yourself with jquery.

Answer 2

Since you are new to the programming, try this:

i had re written your function, Just use only one function, iam passing the id of the element that you want to show/hide. instead of checking a global boolean value(true/false) , Check whether the element is hidden/not:

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

}

The 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')">

As per @xEterno suggestion, you can achieve this using jQUery.

Answer 3

The variable isShow is the culprit.

As per your logic, when the change() method is called, the value of isShow becomes "true".

Hence, in other two methods the execution always goes to the "else" part on first click and isShow becomes "false". So, you'll have to click again.

Since you're trying to learn, I'll let you think of another way of doing it.