CODEWITHSUNDEEP
javascripthtml
Cayland Boston
Cayland Boston

Reputation: 77

What's Wrong With My Javascript Code? It Won't Run

var malediv = document.querySelector('.male');
        var femalediv = document.querySelector('.female');
        var male_sources = [
          "/images/m1.png",
          "/images/m2.png",
          "/images/m3.png",
          "/images/m4.png",
          "/images/m5.png",
          "/images/m6.png",
          "/images/m7.png",
          "/images/m8.png",
        ]
        var female_sources = [
          "/images/f1.png",
          "/images/f2.png",
          "/images/f3.png",
          "/images/f4.png",
          "/images/f5.png",
          "/images/f6.png",
          "/images/f7.png",
          "/images/f8.png",
        ]


        function displayRandMaleImage() {
          malediv.innerHTML = "";
          var malerandom_number = Math.floor(Math.random() * 
male_sources.length);
          var random_male_image_source = male_sources[malerandom_number];
         maleimg = document.createElement('img');
          maleimg.setAttribute('src', random_male_image_source);
          malediv.append(maleimg);
          alert('maleimagedisplayed');
        }
    function displayRandFemaleImage() {
      femalediv.innerHTML = "";
      var femrandom_number = Math.floor(Math.random() * female_sources.length);
      var random_female_image_source = female_sources[femrandom_number];
      femaleimg = document.createElement('img');
      femaleimg.setAttribute('src', random_female_image_source);
      div.append(femaleimg);
    }
    function displayRandImages(){
      displayRandMaleImage();
      displayRandFemaleImage();
      alert('SKEEET');
    }

none of my display random image fundtions are working in my html page that this is embedded in. I even added a test function "anAlert" that works perfectly. Please help me to understand what i can do to make this work.

Upvotes: -1

Views: 88

Answers (2)

Mesar ali
Mesar ali

Reputation: 1898

button is not defined

button.addEventListener('click', displayRandomImage);

You should use it like

document.getElementById('buttonid').addEventListener('click', displayRandImages);

where 'buttonid' is id of your button, should be defined in html.
One more thing, as you are accessing button outside any other js function, So it'll be called on page load.
So you have to write this javascript after your html code so that it'll be called after button element rendered in HTML.

Upvotes: 0

Ashil John
Ashil John

Reputation: 7742

There are two reasons why it isn't working.

1) You haven't defined the button. Which should've been done like: 

var button = document.querySelector('.button_class');

or using the id: 

var button = document.getElementById('button_id');

2) Your function to call the other two display functions is named displayRandImages()

function displayRandImages(){
    displayRandMaleImage();
    displayRandFemaleImage();
    alert('SKEEET');
}

whereas, you've used the function displayRandomImage() in your click event:

button.addEventListener('click', displayRandomImage);

displayRandImages() != displayRandomImage()

Upvotes: 2

Related Questions