Javascript Click Event Issue

On my page are two images that are both visible initially one is a rich graphic the other is a transparent blank image When a user clicks on the transparent image the rich grap

Solution 1:

Toggle visibility of element

[...] removed to keep the post short - see history and / or the working demo

Update to address some parts of your code

The part .getElementsByTagName("change") should very likely be .getElementsByTagName("img"). Some properties (display) were set multiple times. So i rewrote your code like this

functionsetHideHandler()
{
    returnfunction () { 
       console.log("this", this);
       this.style.display = "none";                    
    };      
}

functionsetOnLoad(){           
    var image;              
    var port_change = document.getElementById("change").getElementsByTagName("img");
    for (i = 0; i < port_change.length; i++) {              
        image = port_change[i];         
        image.style.display = "";           
        image.onclick = setHideHandler();
    }
}

With this html

<divid="change"><imgid=tsrc="t.png" /><imgid=gsrc="g.png" /></div>

So now you can see that you set up an onclick handler to hide the image after it has been clicked. After the user has clicked on any image (g or t) the code hides this image. After both images were clicked the user has no option to click on anything to redisplay the other image.

So therefore you must find a way to crosswire them. If user clicks on t then g is shown and t is hidden. Now that g is visible the user can click g to hide it and you must show t again.

This is the complete code

functionshowOther(el){
  if(el.nextElementSibling){
    sibling = el.nextElementSibling;
  }elseif(el.previousElementSibling){
    sibling = el.previousElementSibling;    
  }
  sibling.style.display ='';
  el.style.display = 'none';
}

functionsetHideHandler() {
    returnfunction () {                     
       showOther(this);                 
    };      
}

functionsetOnLoad(){           
    var image;              
var port_change = document.getElementById("change").getElementsByTagName("img");
    for (i = 0; i < port_change.length; i++) {              
        image = port_change[i];         
        image.style.display = "";           
        image.onclick = setHideHandler();
    }
}

Working example of above code

Another fully working example

Update 3 after your explanation

This example shows two images. The white image is always visible. If the user clicks on it the black image visibility is toggled. If the user clicks on the black image it will be hidden see example here

Update 4 regarding your comment on <noscript>

You wrote: In the DOM tree i see <noscript> And images are not switching. i removed this node But when i reload its again there. Why its coming on page HTML tree?

<noscriptstyle="display: inline;">&lt;img class=stay src="trans.png"/&gt;</noscript>

I believe that this goes way beyond your initial question since i provided a working solution for your problem. But to give you a few hints you have to answer a few questions

• Which images are not switching after which user action? Why is this relevant for the noscript-tag?
• Are you using wordpress to create the page we are talking about?
• How do you embed the video - do you create the html by hand or are you using wordpress features to embed video
• If you have full control over the source code and remove something it stays removed. Since you said that you removed the node but after a page load it is there again i assume that you at least partially use functionality that is not 100% controled by you (similar to the wordpress link above).

Please tell me why you did not yet accepted my answer?