Question 188687 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to add JS array to html paragraph using innerHTML?

I am new to DOM and JavaScript. I am still learning.

I’m trying to figure out how to add each element of an array to the html paragraph using innerHTML. I would like to see a different word each time I click on a button. I tried using forEach() or for loop methods, but none of those seem to work. Maybe, I’m doing it wrong. Do you have any suggestions? Math.random() works, but I do not want to use it.

Here’s my example:

const paragraph = document.getElementById('paragraph');
const button = document.getElementById('button');

const array = ['fun', 'smart', 'cool', 'guru', 'geek'];

const funcHandler = () => {
 for(let i = 0; i < array.length; i++){
   paragraph.innerHTML= array[i];
 }
} 

button.addEventListener('click', funcHandler);
Tags:

2

Answers


  1. 0

    Since you don’t want to use Math.random() seems like you’d want to instead cycle trough your array words. You can use the JS’s Remainder operator % in order to loop-back to the array’s index 0 item (word) once a current i integer reaches the array.length

    const paragraph = document.querySelector('#paragraph');
const button = document.querySelector('#button');

const array = ['fun', 'smart', 'cool', 'guru', 'geek'];
const total = array.length; // get the total
let i = 0; // start at index 0;

const funcHandler = () => {
  paragraph.textContent = array[i];
  i += 1;     // increment
  i %= total; // Loop-back
} 

button.addEventListener('click', funcHandler); // Do on click and on....
funcHandler(); // ...init!
    <button id="button" type="button">Next</button>
<p id="paragraph"></p>

    Or instead of i += 1; i %= total; you can use the shorter i = ++i % total;

    Login or Signup to reply.
  2. 0

    In your current code, you’re iterating over the array inside the event handler, but you’re setting the innerHTML of the paragraph to each element of the array in succession. As a result, only the last element will be visible because each iteration overwrites the previous one.

    To display a different word from the array each time you click the button, you can maintain an index variable to keep track of the current word to display.

    Here is how I did it:

    const paragraph=document.getElementById('paragraph');
const button = document.getElementById('button');

const array = ['fun', 'smart', 'cool', 'guru', 'geek'];
let currentIndex = 0;

const funcHandler = () => {
  paragraph.innerHTML = array[currentIndex];
  currentIndex = (currentIndex + 1) % array.length; // Increment the index and loop back to the beginning if necessary
};

button.addEventListener('click', funcHandler);
funcHandler(); //remove this line if you want to start the page without a word
    <p id="paragraph"></p>
<button id="button">Change Word</button>

    I used a "currentIndex" variable that initially points to the first element in the array. Each time the button is clicked, the current word at the "currentIndex" is displayed in the paragraph using "innerHTML". The "currentIndex" is then incremented, and the modulus operator "%" ensures that the index wraps back to 0 when it reaches the length of the array. This way, you cycle through the array of elements with each button click.

    Make sure to adjust the element IDs in the code to match your HTML structure.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search