Using two functions one one element? Is this possible, can a Javascript geek have a glance to see if I made a mistake?

Question

EDIT: I HAVE SOLVED THIS PROBLEM USING HTML CSS INPUT CHECKBOX HACK HOWEVER IF SOMEONE COULD EXPLAIN BELOW THAT WOULD BE GREAT, WOULD LIKE TO UNDERSTAND JAVASCRIPT MORE. PLEASE ASK IF YOU WOULD LIKE THE HTML CSS WORK AROUND AND I WILL POST IT. THANKS PEOPLE.

I have an <input type="image"> element that javascript uses when clicked to hide and show a div. However I also need the <input type="image"> change image to show it is active. At the moment I just use :hover to change the image but obviously when the mouse leaves the image it changes back to the original image.

So I used another function to change the image when clicked but now the other javascript does not work, am I missing something, any help would be much appreciated as a beginner with javascript.

/*This hides and shows a div when the image is clicked. This works however not 
when the last script on this page targets the same element as this does. Any reason why?*/ 
function setVisibility(id) {
if(document.getElementById('bt1').value=='Hide Layer'){
document.getElementById('bt1').value = 'Show Layer';
document.getElementById(id).style.display = 'inline';
}else{
document.getElementById('bt1').value = 'Hide Layer';
document.getElementById(id).style.display = 'none';
}
}
//This is a seperate function that does the same as below script however does 
not use the function above.
var myImage = document.querySelector('img#blog');

myImage.onclick = function() {
    var mySrc = myImage.getAttribute('src');
    if(mySrc === 'img/mars.gif') {
      myImage.setAttribute ('src','img/earth.gif');
    } else {
      myImage.setAttribute ('src','img/mars.gif');
    }
}
/*This is the script that works but makes the top script of this page not work. 
Is there something clashing that is not allowed. It replaces the image with another 
one when clicked however does not let the top page script show or hide the div  */
var theImage = document.querySelector('input.before');

theImage.onclick = function() {
    var theSrc = theImage.getAttribute('src');
    if(theSrc === 'http://platesrecords.co.uk/image/arrow-right.gif') {
      theImage.setAttribute ('src','http://platesrecords.co.uk/image/arrow-down.gif')
    } else {
      theImage.setAttribute ('src','http://platesrecords.co.uk/image/arrow-right.gif');
    }
}

/*This input type image when clicked should change image (which is does) but 
does not hide / show the div below anymore, is this because you cant use two functions one element.*/
<input type="image" class="before" src="http://platesrecords.co.uk/image/arrow-right.gif" 
name="type" id="bt1" value="Hide Layer" onclick="setVisibility('sub3');" >

<div id="sub3" class="hidden-treatments">
<p>Advertising Standards Agency will only allow osteopaths to advertise that they treat conditions where the efficacy has been proven. Unfortunately the conditions listed are only a small percentage of conditions where patients report significant improvement. However for more information on whether osteopathy is suitable for you or your children suffering with other conditions, please call or email to discuss with us. Conditions allowed to be listed:</p>
</div>

Answer 1 · 2015-02-28T21:26:42Z

February 28, 2015 9:26pm

Hi James Ingmire

When assigning a function to the onlick handler, you overwrite any previous functions you've assigned. For example in this code:

theImage.onclick = function() { 
  alert("you'll never see this alert");
};
theImage.onclick = function() { 
  alert("But, you will see me");
};

The second assignment erases the first, so you'll only ever see the second alert box with the message "But, you will see me".

Instead, you need to use the addEventListener method which works like this:

theImage.addEventListener("click", function () {
  alert("You will see me!");
});
theImage.addEventListener("click", function () {
  alert("And me too!");
});

The addEventListener method takes 2 arguments (actually 3, but the 3rd argument is optional): the first argument is a string that indicates the type of event "click", "mousedown", and so on. The second is a callback function that's run when the event is triggered. You can add multiple functions to a single event on a single page element this way.

Welcome to the Treehouse Community

Looking to learn something new?

James Ingmire

James Ingmire

Using two functions one one element? Is this possible, can a Javascript geek have a glance to see if I made a mistake?

1 Answer

Dave McFarland

Dave McFarland

James Ingmire

James Ingmire