JavaScript随机选取img文件夹图片动态加载到div的代码问题

原有代码核心问题 #

• 作用域错误：add函数内部用var声明的变量都是函数私有变量，外部通过addObj.add.x这类写法完全无法访问
• 语法错误：条件判断里写的是赋值符=，不是严格相等判断符===，判断逻辑从根源失效
• 执行时机错误：选图判断逻辑写在事件绑定函数里，页面加载时就会执行，不是点击按钮生成随机数之后触发
• 渲染逻辑缺失：就算拿到了图片路径，也没有把路径赋值给DOM元素的对应属性，图片根本不会展示
• 映射逻辑不全：仅写了数值等于1时的图片匹配规则，其余17个数值对应的图片规则完全缺失

修正后可运行代码 #

先提前把1-18对应的图片文件名填到picMap配置里，再根据自己的需求选择用背景图渲染还是img标签渲染即可：

<script type="text/javascript">
  var addObj = {
    // 配置1-18数值对应的实际图片文件名，按自身资源补全即可
    picMap: {
      1: 'fa.jpg',
      2: 'fb.jpg',
      3: 'fc.jpg',
      // 补全4-17的映射
      18: 'fr.jpg'
    },
    add: function () {
      // 获取三个展示容器
      var box = document.getElementById('box');
      var box1 = document.getElementById('box1');
      var box2 = document.getElementById('box2');
      // 生成三个1-18区间的随机整数
      var x = Math.floor(Math.random() * 18) + 1;
      var y = Math.floor(Math.random() * 18) + 1;
      var z = Math.floor(Math.random() * 18) + 1;

      // 方式1：以背景图形式渲染到容器
      box.style.backgroundImage = `url('./img/${this.picMap[x]}')`;
      box1.style.backgroundImage = `url('./img/${this.picMap[y]}')`;
      box2.style.backgroundImage = `url('./img/${this.picMap[z]}')`;

      // 方式2：以img标签形式插入容器，需要的话替换上面三行背景图代码即可
      // box.innerHTML = `<img src="./img/${this.picMap[x]}" alt="随机素材">`
      // box1.innerHTML = `<img src="./img/${this.picMap[y]}" alt="随机素材">`
      // box2.innerHTML = `<img src="./img/${this.picMap[z]}" alt="随机素材">`
    },
    bindEvent: function () {
      var triggerBtn = document.getElementById('rune');
      triggerBtn.addEventListener('click', () => {
        this.add();
      }, false);
    }
  };
  // 初始化事件绑定
  addObj.bindEvent();
</script>

路径提示：代码里用的./img/路径是相对于当前HTML文件的相对路径，如果你的img文件夹是和CSS文件夹同级、但和HTML文件不同级，需要对应调整路径前缀，保证资源能正常请求到。

内容的提问来源于stack exchange，提问作者Aditya Reddy