JavaScript click event issue

Question

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 graphic is hidden. When the user clicks on the rich graphic the rich graphic is hidden again.

My problem is that currently the rich graphic is not shown after the user has clicked on the transparent blank image. Below is what code i've tried so far.

HTML

 <div id="change">
 <img src="image-visable.png">
 <img src="image-hidden.png">
          </div>

JAVASCRIPT

var port_change, i;
window.onload = function () {

    port_change = document.getElementById("change").getElementsByTagName("change");

    for (i = 0; i < port_change.length; i++) {
        port_change[i].style.display = "";

        port_change[i].onclick = (function (k) {
            var r = function () {
                this.style.display = "none";
                if (k >= port_change.length) { k = 0 }
                port_change[k].style.display = "none";
            };
            return r;
        })(i+1);
    }

    port_change[0].style.display = "";
}

PEN : http://codepen.io/anon/pen/Hbcze Any idea?

Answer 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

function setHideHandler()
{
    return function () { 
       console.log("this", this);
       this.style.display = "none";                    
    };      
}

function setOnLoad(){           
    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

<div id="change">
  <img id=t src="t.png" />
  <img id=g src="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

function showOther(el){
  if(el.nextElementSibling){
    sibling = el.nextElementSibling;
  }else if(el.previousElementSibling){
    sibling = el.previousElementSibling;    
  }
  sibling.style.display ='';
  el.style.display = 'none';
}

function setHideHandler() {
    return function () {                     
       showOther(this);                 
    };      
}

function setOnLoad(){           
    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

T his 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? 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?

<noscript style="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?