Is there a Javascript function to restrict a line in a function to execute one time only

Question

Problem: I have a page which has multiple save button and an alert message will pop out if the button is pressed.I have a saveAll button which is using nodeList to save all data based on whether the checkbox is checked, meaning if 10 checkbox is checked then the saveall() function will execute the save() function 10 times and 10 alert message will pop out.

What I expected: I want to run the saveAll() function and the alert message should only pop out one time so I am expecting a function to restrict the alert in save() function to execute one time only even though it will be executed 10 times continuously. Any other way to get the expecting result is appreciated.

Example Code:

<table class="table" border="1">
      <thead>
        <tr>
          <th>Input</th>
          <th><input id="1"></th>
          <th><input type="checkbox" class="box"></th>
          <th><button type="submit" onclick="save()">save</button></th>
        </tr>
        <tr>
          <th>Input</th>
          <th><input id="2"></th>
          <th><input type="checkbox"  class="box"></th>
          <th><button onclick="save()">save</button></th>
        </tr>
        <tr>
          <th>Input</th>
          <th><input id="3"></th>
          <th><input type="checkbox"  class="box"></th>
          <th><button onclick="save()">save</button></th>
        </tr>
        <button onclick="saveall()">save all</button>
      </thead>
    </table>

function save(){
    //save something into database
     alert("success");
}
       
function saveall() {
        let nodeList = document.querySelectorAll('.box:checked');
        nodeList.forEach(node => node.parentNode.parentNode.querySelectorAll('button')[0].click());
}

did you try using a variable to find the number of times the function has been executed ? — Faizal Hussain, Mar 31 '22 at 08:24
Simply decouple the `alert` call from the `save()` function. Don't think about "limit this line to call once", you should instead think about how to write a proper logic so that it only call once. — Ricky Mo, Mar 31 '22 at 08:27
Pass all changes together instead of looping multiple calls. — Lain, Mar 31 '22 at 09:05
I take it `save` has some logic to know which button is pressed — Bravo, Mar 31 '22 at 12:25

score 0 · Answer 1 · answered Apr 02 '22 at 17:41

this is happening due to event bubbling hence stopped using event.stopPropagation.

explained with example in https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing#:~:text=Event%20bubbling%20and%20capturing%20are,the%20elements%20receive%20the%20event.

score -1 · Answer 2 · edited Apr 03 '22 at 08:10

-1

function saveall(event) {
    let nodeList = document.querySelectorAll('.box:checked');
    nodeList.forEach(node => node.parentNode.parentNode.querySelectorAll('button')[0].click());
    event.stopPropagation();
}

edited Apr 03 '22 at 08:10

Tyler2P

2,324
26
22
31

answered Mar 31 '22 at 08:28

Priya Nayak

47
5

4

Please explain your code. Thanks! – Arnav Thorat Mar 31 '22 at 08:31
Please take more care when writing answers. You have a typo. https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation – General Grievance Mar 31 '22 at 12:24

Is there a Javascript function to restrict a line in a function to execute one time only

2 Answers2