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

Question

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.

See any errors in console? Post your HTML too so the problem is reproducible? — CertainPerformance
– CertainPerformance, Commented May 12, 2018 at 7:44
There should be at least one error in the console because there is no function with name displayRandomImage. — Andreas
– Andreas, Commented May 12, 2018 at 7:56

Ashil John · Accepted Answer · 2018-05-12 08:03:35Z

2

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()

answered May 12, 2018 at 8:03

Ashil John

7,8124 gold badges21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cayland Boston Over a year ago

sorry the button was obsolete code. the functions are called on the page loading in <body onload=""> and no functions work if I call anything other than anAlert()

Mesar ali · Accepted Answer · 2018-05-12 08:04:50Z

0

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.

edited May 12, 2018 at 8:04

answered May 12, 2018 at 7:52

Mesar ali

1,8982 gold badges18 silver badges20 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related