时间戳

首页 > 解决方案 > 我的 Javascript 代码有什么问题？它不会运行

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

问题描述

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”。请帮助我了解我可以做些什么来完成这项工作。

标签： javascripthtml

解决方案

它不起作用的原因有两个。

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

推荐阅读