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

然而，您在点击事件中使用了displayRandomImage()功能：

button.addEventListener('click', displayRandomImage);

displayRandImages() != displayRandomImage()

Answer 2

按钮未定义

button.addEventListener('click', displayRandomImage);

你应该像

一样使用它

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

其中＆＃39; buttonid＆＃39;是你的按钮的id，应该用html定义还有一件事，因为你正在访问任何其他js函数之外的按钮，所以它会在页面加载时被调用。
因此，您必须在html代码之后编写此javascript，以便在HTML中呈现按钮元素后调用它。

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

2 个答案: