'Click event and separate JavaScript from HTML

For a synoptic web application, I am trying to change an image when you click on. I have written a code as follows (in a jsp file) but I want to separate JavaScript from HTML (this next code works well):

<head>
    <script type='text/javascript'>
        function ChangeState(){
            if(document.getElementById('imageStateBlue')!=null){
                var img=document.getElementById('imageStateBlue');
                img.setAttribute('alt', 'State: red');
                img.setAttribute('id', 'imageStateRed');
                img.setAttribute('src', 'pages/synoptique/src/images/red.png');}
            else{
                if(document.getElementById('imageStateRed')!=null){
                    var img=document.getElementById('imageStateRed');
                    img.setAttribute('alt', 'State: blue');
                    img.setAttribute('id', 'imageStateBlue');
                    img.setAttribute('src', 'pages/synoptique/src/images/blue.png');}}}
    </script>
</head>
<body>
    <img alt='State: blue' id='imageStateBlue' onclick='ChangeState()' src='pages/synoptique/src/images/blue.png'/>
</body>

So, I tried that (with the same js code in ChangeState.js)(this next code does not work well):

<head>
    <script type='text/javascript' src='pages/synoptique/js/ChangeState.js'></script>
</head>
<body>
    <img alt='State: blue' id='imageStateBlue' onclick='ChangeState()' src='pages/synoptique/src/images/blue.png'/>
</body>

and that (these two next codes do not work well):

<head>
    <script type='text/javascript' src='pages/synoptique/js/ChangeState.js'></script>
</head>
<body>
    <img alt='State: blue' id='imageStateBlue' src='pages/synoptique/src/images/blue.png'/>
</body>

with ChangeState.js like that:

function toRed(){
    var img=document.getElementById('imageStateBlue');
    img.setAttribute('alt', 'State: red');
    img.setAttribute('id', 'imageStateRed');
    img.setAttribute('src', 'pages/synoptique/src/images/red.png');}
function toBlue(){
    var img=document.getElementById('imageStateRed');
    img.setAttribute('alt', 'State: blue');
    img.setAttribute('id', 'imageStateBlue');
    img.setAttribute('src', 'pages/synoptique/src/images/blue.png');}
function imgClick(){
    document.getElementById('imageStateBlue').addEventListener('click', toRed, true);
    document.getElementById('imageStateRed').addEventListener('click', toBlue, true);}
window.addEventListener('load', imgClick, true);

but nothing works. It seems to do not be imported at the page loading. (When the codes do not work well, I mean the image does not change at the click).

javascripthtmldomonclickdom-events


Solution 1:[1]

You haven't added the the click event correctly.

document.getElementById('imageStateBlue').addEventListener('click', toRed, true);
document.getElementById('imageStateRed').addEventListener('click', toBlue, true);}

Once you change, it, it removes the id from the event right? So, what you need to do is once you change the ID, reassign the event listener. So both in toBlue and toRed functions, redeclare the event listeners.

function toRed(){
    var img=document.getElementById('imageStateBlue');
    img.setAttribute('alt', 'State: red');
    img.setAttribute('id', 'imageStateRed');
    img.setAttribute('src', 'pages/synoptique/src/images/red.png');
    document.getElementById('imageStateRed').addEventListener('click', toBlue, true);
}
function toBlue(){
    var img=document.getElementById('imageStateRed');
    img.setAttribute('alt', 'State: blue');
    img.setAttribute('id', 'imageStateBlue');
    img.setAttribute('src', 'pages/synoptique/src/images/blue.png');
    document.getElementById('imageStateRed').addEventListener('click', toBlue, true);
}

And the first imgClick would fail, because one of the image is not existing. That may also cause to fail the event setting.

Solution 2:[2]

You can't assign have the handlers responding to id changes

function ChangeState() {
  var img = this;
  if (/blue.png$/.test(img.src)) {
    img.setAttribute('alt', 'State: red');
    img.setAttribute('id', 'imageStateRed');
    img.setAttribute('src', 'pages/synoptique/src/images/red.png');
  } else {
    img.setAttribute('alt', 'State: blue');
    img.setAttribute('id', 'imageStateBlue');
    img.setAttribute('src', 'pages/synoptique/src/images/blue.png');
  }
}

function imgClick() {
  document.getElementById('imageState').addEventListener('click', ChangeState, true);
}
window.addEventListener('load', imgClick, true);
<img alt='State: blue' id='imageState' src='pages/synoptique/src/images/blue.png' />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Praveen Kumar Purushothaman
Solution 2 Arun P Johny

Related Questions