我的Javascript代码有什么问题？ 它不会运行

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');
    }

在嵌入的html页面中，没有任何显示随机图像基金会能正常工作。我什至添加了一个测试功能“ anAlert”，它可以完美运行。 请帮助我了解我可以做些什么。

Answer 1

它不起作用有两个原因。

1）您尚未定义按钮。 应该这样做：

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

或使用ID：

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

2）您调用其他两个显示函数的函数名为displayRandImages()

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

相反，您在click事件中使用了函数displayRandomImage() ：

button.addEventListener('click', displayRandomImage);

displayRandImages() != displayRandomImage()

Answer 2

按钮未定义

button.addEventListener('click', displayRandomImage);  

你应该像这样使用它

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

其中“ buttonid”是您按钮的ID，应在html中定义。
还有一件事，当您访问任何其他js函数外部的按钮时，将在页面加载时调用它。
因此，您必须在html代码之后编写此javascript，以便在HTML中呈现的button元素之后调用它。