CODEWITHSUNDEEP
javascriptjquery
VanHartman
VanHartman

Reputation: 27

trying to call my function from a click event JS/jQuery

I have a button; when I click the button I want my function to get a random image (using colors temporarily) I know the code in my function works, but when I try to call the function from the .click event the function doesn't seem to work any help would be greatly appreciated.

function getRandomImage() {
  if ($("#imageContainer").css("background-color", "black") == $("#imageContainer").css("background-color", "black")) {
    $("#imageContainer").css("background-color", "red");
  }
}

$("#mainButton").click(function(){
getRandomImage();
});

I know I'm missing something/doing something off, please help :)

Upvotes: 1

Views: 231

Answers (4)

VanHartman
VanHartman

Reputation: 27

thank you all very much, I brain lapsed this worked best for me but again thank you all!

    $(document).ready(function(){
        $("#mainButton").click(function(){
            getRandomImage();
         });
    });
Ouside document.ready() you should write the function

 function getRandomImage() {
  if ($("#imageContainer").css("background-color", "black") == $("#imageContainer").css("background-color", "black")) {
    $("#imageContainer").css("background-color", "red");
  }
}
Else you can directly call the function from the button.

<input type="button" onClick="getRandomImage()" id="mainButton" />

Upvotes: 0

Abhishekh Gupta
Abhishekh Gupta

Reputation: 6236

You can try this:

function getRandomImage() {
    if ($("#imageContainer").css("background-color") == "rgb(0, 0, 0)") {
        $("#imageContainer").css("background-color", "red");
      }
    }

$(document).ready(function() {
    $("#mainButton").click(function(){
        getRandomImage();
    });
});

Upvotes: 0

Rino Raj
Rino Raj

Reputation: 6264

Please try writing the click event inside document.ready()

    $(document).ready(function(){
        $("#mainButton").click(function(){
            getRandomImage();
         });
    });

Ouside document.ready() you should write the function

 function getRandomImage() {
  if ($("#imageContainer").css("background-color", "black") == $("#imageContainer").css("background-color", "black")) {
    $("#imageContainer").css("background-color", "red");
  }
}

Else you can directly call the function from the button.

<input type="button" onClick="getRandomImage()" id="mainButton" />

Upvotes: 0

jwatts1980
jwatts1980

Reputation: 7356

You need to make sure that your jQuery code is wrapped in a document ready like so:

<script>
    function getRandomImage() {
      if ($("#imageContainer").css("background-color", "black") == $("#imageContainer").css("background-color", "black")) {
        $("#imageContainer").css("background-color", "red");
      }
    }

    $(document).ready(function() {
        $("#mainButton").click(function(){
            getRandomImage();
        });
    });
</script>

Also, since you didn't show the HTML, you need to make sure that the ID attribute is set:

<input type="button" id="mainButton" />

JQuery selectors (like your #mainButton) immediately search the document model to find the element to attach the event to. If you call the jQuery code before the document has loaded, it will likely not find the element because it doesn't exist yet. So you use the document ready to ensure the jQuery code runs after all the elements have loaded into the DOM.

Upvotes: 1

Related Questions