How to stop script execution-CodePudding

This script adds numbers from the array one by one, I need that when the numbers in the array run out when the button is pressed, nothing happens.

Here is codepen of my problem - https://codepen.io/Agasfer/pen/gOjMrrM

Here in the code I tried one of the termination methods but nothing works and when the numbers in the array end with further clicks, displays undefined.

let numbers = [1, 2, 3, 4, 5];
let paragraph = document.querySelector('p');
let currentIndex = 0;
paragraph.innerHTML = numbers[currentIndex];

let button1 = document.querySelector('button');
button1.onclick = function() {
  currentIndex  = 1;
  let node = document.createTextNode(", "   numbers[currentIndex]);
  paragraph.appendChild(node);

  if (node = ", undefined") {
    event.stopPropagation()
  };

}

<title>Hidden numbers</title>
<p></p>
<button>Show next number</button>

CodePudding user response：

Check if currentIndex is at array length -1. Use return to prevent any further code executions (early exit from a function).
Don't use onclick handlers unless you're creating a brand new element from in-memory. Use addEventListener() instead
The usage of const might help in the long run. Use it.
Never ever (unless you really know what you're doing) use Event.stopPropagation(). An app's layers/components (yours or third-partys) should be always aware of ongoing events in their document environment.
It's simpler to use textContent = instead of creating TextNodes

const numbers = [1, 2, 3, 4, 5];
const paragraph = document.querySelector('p');
const button = document.querySelector('button');


let currentIndex = 0;


paragraph.innerHTML = numbers[currentIndex];

button.addEventListener("click", () => {

  if (currentIndex === numbers.length -1) return;

  currentIndex  = 1;
  paragraph.textContent  = ", "   numbers[currentIndex];

});

<title>Hidden numbers</title>
<p></p>
<button>Show next number</button>

If you want to make the Button element disabled then you might not need the return, just add the disabled property on your Button element:

const numbers = [1, 2, 3, 4, 5];
const paragraph = document.querySelector('p');
const button = document.querySelector('button');


let currentIndex = 0;


paragraph.innerHTML = numbers[currentIndex];

button.addEventListener("click", () => {
  currentIndex  = 1;
  paragraph.textContent  = ", "   numbers[currentIndex];
  if (currentIndex === numbers.length -1) {
    button.disabled = true;
  }
});

<title>Hidden numbers</title>
<p></p>
<button>Show next number</button>

CodePudding user response：

I think you are overthinking this

let numbers = [1, 2, 3, 4, 5];
let paragraph = document.querySelector('p');
let currentIndex = 0;
paragraph.innerHTML = numbers[currentIndex];
let button1 = document.querySelector('button');

button1.addEventListener("click",function() {
  if (currentIndex >= numbers.length-1) return; 
  currentIndex  
  let node = document.createTextNode(", "   numbers[currentIndex]);
  paragraph.appendChild(node);
})

<title>Hidden numbers</title>
<p></p>
<button>Show next number</button>

CodePudding user response：

You're doing perfectly fine. But in order to achieve what you want, you just need to add one condition in the button click listener, that once your currentIndex will be out of your array length, you will be returned from the listener. And along with this, in order to make your code cleaner, the below check is no longer required.

if (node = ", undefined") {
    event.stopPropagation()
};

So, your onclick listener will be as below

button1.onclick = function(){
        if(numbers.length <= currentIndex 1)
          return;
        currentIndex =1;
        let node  = document.createTextNode(", "   numbers[currentIndex]);
        paragraph.appendChild(node);
}