Question

我是JS新手。我想从鼠标单击数组中的数组中添加（元素）单词。

var pos = document.querySelector('span');
for (let i = 0; i < array length; i++) {
  button.addEventListener('click', function() {
    pos.innerHTML = array[i];
  });
}

<p> the word generated is <span></span></p>
<button>go</button>

Answer 1

let array1 = ['1', '2', '3'];
var pos = document.getElementById('output');
var button = document.getElementById('btn');

button.addEventListener('click', function() {
  for (var i = 0; i < array1.length; i++) {
    pos.innerHTML = pos.innerHTML + array1[i];
  }
});

<p>the word generated is <span id="output"></span></p>
<button id="btn">go</button>

这将在单击按钮时显示数组的所有元素。

Answer 2

尝试一下，它会在span元素中随机显示一个单词。

var words = ['rest', 'fever', 'ball', 'sky', 'earth', 'moon', 'sun', 'temper'];
var button = document.querySelectorAll('button').item(0);
button.addEventListener('click', function(event){
 let span = document.querySelectorAll('p span').item(0);
 let randomWord = words[Math.round(Math.random() * (words.length - 1))];
 span.textContent = randomWord;
});

p span {
 font-weight: bold;
 color: red;
}

<p> the word generated is <span></span></p>
<button>go</button>

Answer 3

或使用Jquery：

<p> the word generated is <span></span></p>
<button id="btn">go</button>

代码：

var array = ['test','test2'];

  $('#btn).on('click', function () {
  array.forEach(function(entry) {
  $('p span).append(entry+' ');
})
})

Answer 4

如果要生成随机文本，则可以使用random函数生成随机数组索引。

button.addEventListener('click', function() {
  pos.innerHTML = arr[Math.floor(Math.random() * Math.floor(arr.length))]
});

如何将动态文本添加到HTML标签？

4 个答案: