Javascript/jQuery Change CSS On Click Not Working

Question

I'm trying to make three different buttons that switch between three different images using the CSS display property (this is so all the images will load when the webpage loads). However, it is not working, and I don't know what is wrong with my code.

https://jsfiddle.net/agt559e8/ -- My Code

function USradarChange1() {
    //document.getElementById("usradar1").src="weather/current-usradar.gif";
    $('#USradarChangeButton1').click(function() {
        $('#usradar1').css({ 'display': 'inline' });
        $('#usradar2').css({ 'display': 'none' });
        $('#usradar3').css({ 'display': 'none' });
    });
}

function USradarChange2() {
    //document.getElementById("usradar2").src="weather/usradar-an12hour.gif";
    $('#USradarChangeButton2').click(function() {
        $('#usradar1').css({ 'display': 'none' });
        $('#usradar2').css({ 'display': 'inline' });
        $('#usradar3').css({ 'display': 'none' });
    });
}

function USradarChange3() {
    //document.getElementById("usradar3").src="weather/usradar-an7day.gif";
    $('#USradarChangeButton3').click(function() {
        $('#usradar1').css({ 'display': 'none' });
        $('#usradar2').css({ 'display': 'none' });
        $('#usradar3').css({ 'display': 'inline' });
    });
}

<div class="button-container">
    <a class="button" id="USradarChangeButton1">Current US Radar</a>
    <a class="button" id="USradarChangeButton2">US Radar 12 Hours</a>
    <a class="button" id="USradarChangeButton3">US Radar 7 Days</a>
</div>

<div id="imgcontainer">
    <img class="radar-img" id="usradar1" src="weather/current-usradar.gif" alt="Current US Radar">
    <img class="radar-img" id="usradar2" src="weather/usradar-an7day.gif" alt="Current US Radar">
    <img class="radar-img" id="usradar3" src="weather/usradar-an12hour.gif" alt="Current US Radar">
</div>

Any ideas?

Answer 1

There's a couple of things you got wrong here, first off you need to provide the jQuery library in jsFiddle take a look here

Second: the functions you have aren't being called, therefor aren't binding the click handlers to the buttons.

Third: You need to do it after all the stuff is done loading so it should look more like this:

  $(document).ready(function () {
    $('#USradarChangeButton1').click(function (event) {
    event.preventDefault();
    $('#usradar1').css({
        'display': 'inline'
    });
    $('#usradar2').css({
        'display': 'none'
    });
    $('#usradar3').css({
        'display': 'none'
    });

});


$('#USradarChangeButton2').click(function (event) {
    event.preventDefault();
    $('#usradar1').css({
        'display': 'none'
    });
    $('#usradar2').css({
        'display': 'inline'
    });
    $('#usradar3').css({
        'display': 'none'
    });
});


$('#USradarChangeButton3').click(function () {
    event.preventDefault();
    $('#usradar1').css({
        'display': 'none'
    });
    $('#usradar2').css({
        'display': 'none'
    });
    $('#usradar3').css({
       'display': 'inline'
    });
 });

})

Notice the event.preventDefault() this is being used to prevent the default behavior of links.

Answer 2

First of all, the jQuery lib was missing in fiddle, secondly I found syntax issues.

you have declared a function in which you have registered a 'click' event, which is not gonna work

Here are the 2 approaches that will help you to achieve your result

$('#USradarChangeButton1').click(USradarChange1);
$('#USradarChangeButton2').click(USradarChange2);
$('#USradarChangeButton3').click(USradarChange3);

function USradarChange1() {
    $('#usradar1').css({ 'display': 'inline' });
    $('#usradar2').css({ 'display': 'none'});
    $('#usradar3').css({ 'display': 'none'});
}


function USradarChange2()
{
    $('#usradar1').css({'display': 'none'});    
    $('#usradar2').css({'display': 'inline'});    
    $('#usradar3').css({'display': 'none'});
}

function USradarChange3()
{
    $('#usradar1').css({'display': 'none'});
    $('#usradar2').css({'display': 'none'});
    $('#usradar3').css({'display': 'inline'});
}

OR directly without declaring any function like this :

$('#USradarChangeButton1').click(function(){
    $('#usradar1').css({ 'display': 'inline' });
    $('#usradar2').css({ 'display': 'none'});
    $('#usradar3').css({ 'display': 'none'});
});

$('#USradarChangeButton2').click(function(){
    $('#usradar1').css({'display': 'none'});    
    $('#usradar2').css({'display': 'inline'});    
    $('#usradar3').css({'display': 'none'});
});

$('#USradarChangeButton2').click(function(){
    $('#usradar1').css({'display': 'none'});
    $('#usradar2').css({'display': 'none'});
    $('#usradar3').css({'display': 'inline'});
});

Hope it ll help you

Answer 3

You have several issues with your code. Firstly you define some functions which are never called so the event hooks within them are never bound, there are mis-matched braces and your fiddle does not include jQuery itself.

Those issues aside, your code can be improved by using DRY principles. Try this:

<div class="button-container"> 
    <a class="button" id="USradarChangeButton1" href="#usradar1">Current US Radar</a>
    <a class="button" id="USradarChangeButton2" href="#usradar2">US Radar 12 Hours</a>
    <a class="button" id="USradarChangeButton3" href="#usradar3">US Radar 7 Days</a>
</div>

<div id="img-container">
    <img class="radar-img" id="usradar1" src="http://trendting.com/wp-content/uploads/2014/05/giphy-225.gif" alt="Current US Radar" />
    <img class="radar-img" id="usradar2" src="https://media3.giphy.com/media/H3MXq3XT4z2ec/200_s.gif" alt="US Radar 12 Hours" />
    <img class="radar-img" id="usradar3" src="http://media.giphy.com/media/10Ocy3t9qoSOwE/giphy.gif" alt="US Radar 7 Days" />
</div>

$(function() {
    $('.button').click(function(e) {
        e.preventDefault();
        $('#img-container img').hide();
        $($(this).attr('href')).show();
    });
});

Example fiddle

Note that this single click handler will now work for all .button elements, as they now relate to the required div via the href attribute.

Answer 4

Your logic is wrong; What you are currently doing is binding the function to the click once the user has clicked on the button.

What you need to do is bind those 3 functions when the DOM is ready.

$(function(){
    $('#USradarChangeButton1').click(function() {
        $('#usradar1').css({'display': 'inline'});
        $('#usradar2').css({'display': 'none'});
        $('#usradar3').css({'display': 'none'});
    });

    $('#USradarChangeButton2').click(function() {
        $('#usradar1').css({'display': 'none'});
        $('#usradar2').css({'display': 'inline'});
        $('#usradar3').css({'display': 'none'});
    });

    $('#USradarChangeButton3').click(function() {
        $('#usradar1').css({'display': 'none'});
        $('#usradar2').css({'display': 'none'});
        $('#usradar3').css({'display': 'inline'});
    });
});

Answer 5

The problem is that your handling code isn't being executed because they're in functions that are never called (USradarChange3 and friends). You can either:

• Call the functions so that the binding code inside gets executed.
• or remove the functions so you don't need to call the functions for the binding to take place.

Also, the jsFiddle doesn't seem to add jQuery so that could also be a problem. And if jQuery is loaded, wrap everything in a ready handler. to make sure the elements are loaded prior to binding.

Answer 6

You are not calling the 3 functions defined?It will not work then!

You need to put your jquery code in the $(document).ready()

$(document).ready(function(){
$('#USradarChangeButton1').click(function() {
            $('#usradar1').css({
                'display': 'inline'
            });

            $('#usradar2').css({
                'display': 'none'
            });

            $('#usradar3').css({
                'display': 'none'
            });
        });

//BUTTON 2 CODE
//BUTTON 3 CODE

});