0

每个“骰子”都应该显示一张图片中的随机array图片。如何使用 更改每个标签的src属性值？<img>for loop

我试图使用for循环，但它不起作用......

感谢您的提示和帮助。

 const dice1 = document.getElementById('dice1');
 const dice2 = document.getElementById('dice2');
 const dice3 = document.getElementById('dice3');
 const dice4 = document.getElementById('dice4');
 const dice5 = document.getElementById('dice5');
 const dice6 = document.getElementById('dice6');
 const button = document.getElementById('button');

const imgs = [dice1, dice2, dice3, dice4, dice5, dice6];

let pics = ['https://i.postimg.cc/MfVDpSmQ/Eagle.jpg', 
'https://i.postimg.cc/QKGQPzZx/Man.jpg', 
'https://i.postimg.cc/1g7MWMzf/Dog.jpg', 
'https://i.postimg.cc/xc9HzM07/Telephone.jpg', 
'https://i.postimg.cc/4mwcbyy3/Robot.jpg', 
'https://i.postimg.cc/ctRRNcd7/Moon.jpg', 
'https://i.postimg.cc/xJW5QCMQ/Dinosaur.jpg',
'https://i.postimg.cc/hhdMrLRt/Fish.jpg', 
'https://i.postimg.cc/Ty1JWmcG/Flowers.jpg'];


const display = (arr) => {
    for (let i = 0; i > arr.length; i++){
       return i.src = pics[Math.floor(Math.random() * pics.length)]
    }
 }

button.onclick = display(imgs)
4

2 回答 2

2

您的代码中存在许多问题：

button.onclick = display(imgs)

button.onclick应该设置为函数本身，而不是在给定值上运行时的值。你可以做的是.bind改用。

for (let i = 0; i > arr.length; i++){

i从 开始0，这意味着它将始终低于arr.length，因此此循环将永远不会运行。

i.src = ...

i是一个包含数字的变量，而不是带有 index 的图像i。您可能想在imgs[i]这里改用它，它引用图像编号。i.

这是应用我上面提出的修复的一种方法：

const dice1 = document.getElementById('dice1');
const dice2 = document.getElementById('dice2');
const dice3 = document.getElementById('dice3');
const dice4 = document.getElementById('dice4');
const dice5 = document.getElementById('dice5');
const dice6 = document.getElementById('dice6');
const button = document.getElementById('button');

const imgs = [dice1, dice2, dice3, dice4, dice5, dice6];

let pics = ['https://i.postimg.cc/MfVDpSmQ/Eagle.jpg', 
    'https://i.postimg.cc/QKGQPzZx/Man.jpg', 
    'https://i.postimg.cc/1g7MWMzf/Dog.jpg', 
    'https://i.postimg.cc/xc9HzM07/Telephone.jpg', 
    'https://i.postimg.cc/4mwcbyy3/Robot.jpg', 
    'https://i.postimg.cc/ctRRNcd7/Moon.jpg', 
    'https://i.postimg.cc/xJW5QCMQ/Dinosaur.jpg',
    'https://i.postimg.cc/hhdMrLRt/Fish.jpg', 
    'https://i.postimg.cc/Ty1JWmcG/Flowers.jpg'];


const display = () => {
    for (let i = 0; i < imgs.length; i++) {
        imgs[i].src = pics[Math.floor(Math.random() * pics.length)]
    }
};

button.onclick = display;
<button id="button">Roll the dice</button>
<img id="dice1"/>
<img id="dice2"/>
<img id="dice3"/>
<img id="dice4"/>
<img id="dice5"/>
<img id="dice6"/>

编辑：为避免重复相同的图像，.splice请在计算图片的随机索引后使用（如@CertainPerformance 建议的那样）：

const dice1 = document.getElementById('dice1');
const dice2 = document.getElementById('dice2');
const dice3 = document.getElementById('dice3');
const dice4 = document.getElementById('dice4');
const dice5 = document.getElementById('dice5');
const dice6 = document.getElementById('dice6');
const button = document.getElementById('button');

const imgs = [dice1, dice2, dice3, dice4, dice5, dice6];

let pics = ['https://i.postimg.cc/MfVDpSmQ/Eagle.jpg', 
    'https://i.postimg.cc/QKGQPzZx/Man.jpg', 
    'https://i.postimg.cc/1g7MWMzf/Dog.jpg', 
    'https://i.postimg.cc/xc9HzM07/Telephone.jpg', 
    'https://i.postimg.cc/4mwcbyy3/Robot.jpg', 
    'https://i.postimg.cc/ctRRNcd7/Moon.jpg', 
    'https://i.postimg.cc/xJW5QCMQ/Dinosaur.jpg',
    'https://i.postimg.cc/hhdMrLRt/Fish.jpg', 
    'https://i.postimg.cc/Ty1JWmcG/Flowers.jpg'];


const display = () => {
    const picsClone = pics.slice(); // To avoid removing image URLs from the `pics` array
    for (let i = 0; i < imgs.length; i++) {
        imgs[i].src = picsClone.splice(Math.floor(Math.random() * picsClone.length), 1);
    }
};

button.onclick = display;
<button id="button">Roll the dice</button>
<img id="dice1"/>
<img id="dice2"/>
<img id="dice3"/>
<img id="dice4"/>
<img id="dice5"/>
<img id="dice6"/>

于 2019-01-18T22:00:23.793 回答
1

文档中的数字索引id通常是个坏主意。考虑改用类。此外，不要for考虑使用循环（需要手动迭代，并且没有任何抽象），forEach而是考虑使用：

const dice = document.querySelectorAll('.dice');
button.onclick = () => {
  dice.forEach((die) => {
    die.src = pics[Math.floor(Math.random() * pics.length)]
  });
};


const dice = document.querySelectorAll('.dice');
const pics = ['https://i.postimg.cc/MfVDpSmQ/Eagle.jpg',
  'https://i.postimg.cc/QKGQPzZx/Man.jpg',
  'https://i.postimg.cc/1g7MWMzf/Dog.jpg',
  'https://i.postimg.cc/xc9HzM07/Telephone.jpg',
  'https://i.postimg.cc/4mwcbyy3/Robot.jpg',
  'https://i.postimg.cc/ctRRNcd7/Moon.jpg',
  'https://i.postimg.cc/xJW5QCMQ/Dinosaur.jpg',
  'https://i.postimg.cc/hhdMrLRt/Fish.jpg',
  'https://i.postimg.cc/Ty1JWmcG/Flowers.jpg'
];
const button = document.querySelector('#button');
button.onclick = () => {
  dice.forEach((die) => {
    die.src = pics[Math.floor(Math.random() * pics.length)]
  });
};
<img class="dice">
<img class="dice">
<img class="dice">
<img class="dice">
<img class="dice">
<img class="dice">
<button id="button">Roll the dice</button>

为确保图像不重复，每次单击按钮时，复制数组，然后splice取出所选项目：

const [src] = picsCopy.splice(Math.floor(Math.random() * picsCopy.length), 1);
die.src = src;


const dice = document.querySelectorAll('.dice');
const pics = ['https://i.postimg.cc/MfVDpSmQ/Eagle.jpg',
  'https://i.postimg.cc/QKGQPzZx/Man.jpg',
  'https://i.postimg.cc/1g7MWMzf/Dog.jpg',
  'https://i.postimg.cc/xc9HzM07/Telephone.jpg',
  'https://i.postimg.cc/4mwcbyy3/Robot.jpg',
  'https://i.postimg.cc/ctRRNcd7/Moon.jpg',
  'https://i.postimg.cc/xJW5QCMQ/Dinosaur.jpg',
  'https://i.postimg.cc/hhdMrLRt/Fish.jpg',
  'https://i.postimg.cc/Ty1JWmcG/Flowers.jpg'
];
const button = document.querySelector('#button');
button.onclick = () => {
  const picsCopy = pics.slice();
  dice.forEach((die) => {
    const [src] = picsCopy.splice(Math.floor(Math.random() * picsCopy.length), 1);
    die.src = src;
  });
};
<img class="dice">
<img class="dice">
<img class="dice">
<img class="dice">
<img class="dice">
<img class="dice">
<button id="button">Roll the dice</button>

于 2019-01-18T22:07:16.293 回答