将图像从图像文件夹动态添加到DIV框

Question

我正在尝试创建一个随机数生成器，其中基于与CSS文件夹在同一层次结构的IMG文件夹中选择图像的数字。但是，正在选择并显示图像。

<script type="text/javascript">

  var addObj = {

    add: function () {
      var box = document.getElementById('box');
      var box1 = document.getElementById('box1');
      var box2 = document.getElementById('box2');
      var pic = document.getElementById('pic')
      var x = Math.floor(Math.random() * 18) + 1;
      var y = Math.floor(Math.random() * 18) + 1;
      var z = Math.floor(Math.random() * 18) + 1;
      console.log(x);
      console.log(y);
      console.log(z);
    },

    EventListners: function () {
      var button = document.getElementById('rune');
      button.addEventListener('click', addObj.add, false);

      if (addObj.add.x = 1) {
        addObj.add.box = "url('./img/fa.jpg')";
      }else {
        console.log("n/a")
      }
    }

  };

addObj.EventListners();

Answer 1

您可以使用

  var box = document.getElementById('box');
  var box1 = document.getElementById('box1');
  var box2 = document.getElementById('box2');
  var pic = document.getElementById('pic')
  // this elements you can get globally
  var addObj = {

    add: function () {
      let x = Math.floor(Math.random() * 18) + 1;
      let y = Math.floor(Math.random() * 18) + 1;
      let z = Math.floor(Math.random() * 18) + 1;
      if (x == 1) { // the checker block you should add to the function at the eventlistener, the `=` is the assignment operator, the logically operator the `==` or the `===`
      box.src = './img/fa.jpg'; // the `box` variable is an image element, you can set the source with the `src` attribute
      }else {
        console.log("n/a")
      }
    },
    EventListners: function () {
      var button = document.getElementById('rune');
      button.addEventListener('click', addObj.add, false);

    }

  };

addObj.EventListners();

OOP非常好，但是起初您应该很好地了解该语言。