How to break loop in javascript?

Question

const arrow = document.querySelector("#arrow");
const callAllPie = document.querySelector(".allPie");
eventList();
function eventList(e) {
  arrow.addEventListener("click", showSkills);
}
function showSkills() {
  let element = callAllPie;
  for (let i = 0, n = 4; i < n; i++) {
    const pie = document.createElement("div");
    pie.classList.add("pie1");
    callAllPie.appendChild(pie);
    const rightDiv = document.createElement("div");
    rightDiv.classList.add("slice-right1");
    const leftDiv = document.createElement("div");
    leftDiv.classList.add("slice-left1");
    const percentDiv = document.createElement("div");
    percentDiv.classList.add("percent1");
    const numberDiv = document.createElement("div");
    numberDiv.classList.add("number1");
    numberDiv.innerHTML = "%99";
    const nameDiv = document.createElement("div");
    nameDiv.classList.add("name1");
    nameDiv.innerHTML = "HTML";
    pie.appendChild(rightDiv);
    pie.appendChild(leftDiv);
    pie.appendChild(percentDiv);
    percentDiv.appendChild(numberDiv);
    percentDiv.appendChild(nameDiv);
    callAllPie.appendChild(pie);
  }
}

I want to break the loop after the click event runs once, how do I do it? When run the click event, added pie div to my page but when I clicked again, it being created again.

Breaking the loop in this case is a no-go. You can pass a third argument to addEventListener, an object like this: {once: true}, that way the listener works only once. — Teemu
– Teemu, Commented Dec 15, 2022 at 12:42
You can run a function to check if the pie div exist. If it does then skip the loop, basically encapsulate the for loop in an if statement. if(pie exists = false){run for loop} — JKhan
– JKhan, Commented Dec 15, 2022 at 12:48

Sean Anglim · Accepted Answer · 2022-12-15 12:57:03Z

1

You could simply remove the click listener at the beginning of your showSkills() function so no further clicks trigger an action:

function showSkills() {
    arrow.removeEventListener('click', showSkills);
    let element = callAllPie;
    ....
}

Or as Teemu points out, a much cleaner approach is to set once: true in the options parameter:

arrow.addEventListener("click", showSkills, {once: true});

edited Dec 15, 2022 at 12:57

answered Dec 15, 2022 at 12:45

Sean Anglim

17910 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kushagra-aa · Accepted Answer · 2022-12-15 13:05:57Z

0

You can make a boolean isLoopRunning and use it to see if the loop Is already running

const arrow = document.querySelector("#arrow");
const callAllPie = document.querySelector(".allPie");
eventList();
let isLoopRunning = false;
function eventList(e) {
  arrow.addEventListener("click", showSkills);
}
function showSkills() {
  let element = callAllPie;
  isLoopRunning = !isLoopRunning;
  for (let i = 0, n = 4; i < n; i++) {
    if (isLoopRunning) {
      // your code here
    } else {
      break;
    }
  }
}

answered Dec 15, 2022 at 13:05

kushagra-aa

5805 silver badges13 bronze badges

Comments

Praveen K · Accepted Answer · 2022-12-15 13:06:51Z

0

The break statement terminates the current loop.

if condition satisfies requirement just use break keyword inside loop

for(let i=0; i<10; i++){
if(i==6){
console.log(i)
break;
}
console.log("hi")
}

"hi" will not print after 6 times

answered Dec 15, 2022 at 13:06

Praveen K

13 bronze badges

Comments

Rene van der Lende · Accepted Answer · 2022-12-15 15:14:54Z

0

When using a status variable outside the function you will have the option to reset the status elsewhere in the code and have the loop run once again.


var showSkills = true;

// Runs once upon user click
function showSkills() {
   if (showSkills) {

      for {
          /* Do the loop */
      };

      showSkills = false;
   };
}

// If you need to run it again upon user click.
// E.g. attach it to some 'reset' button.
function reset() {
   showSkills = true;
}

answered Dec 15, 2022 at 15:14

Rene van der Lende

5,3912 gold badges16 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to break loop in javascript?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related