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

Question

I am new to JS. I want to add (elements) words from an array on mouse click into HTML.

 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> 

This will display all element of array on button click.

Answer 2

Try this, it randomly displays a word in span element.

 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

Or with Jquery:

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

Code:

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

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

Answer 4

If you are looking for random text generations, you can use random function to generate random array indexes.

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