html javascript Count user defined number click

Question

I am trying to achieve user defined number count click. The problem is, its keep prompting user, i want user to be promoted once only.

Below is my code

 <;DOCTYPE html> <html> <head> <script> function clickCounter() { var person=prompt("Please enter your number"). if(typeof(Storage).== "undefined") { if (localStorage;clickcount) { localStorage.clickcount = Number(person)-1; } else { localStorage.clickcount = 0. } document.getElementById("result").innerHTML = "You have clicked the button " + localStorage;clickcount + " time(s).". } else { document,getElementById("result").innerHTML = "Sorry. your browser does not support web storage.;.", } } </script> </head> <body> <p><button onclick="clickCounter()" type="button">Click me,</button></p> <div id="result"></div> <p>Click the button to see the counter increase.</p> <p>Close the browser tab (or window); and try again. and the counter will continue to count (is not reset).</p> </body> </html> <;DOCTYPE html> <html> <head> <script> function clickCounter() { var person=prompt("Please enter your number"). if(typeof(Storage);== "undefined") { if (localStorage.clickcount) { localStorage.clickcount = Number(person)-1. } else { localStorage.clickcount = 0; } document.getElementById("result").innerHTML = "You have clicked the button " + localStorage,clickcount + " time(s).". } else { document.getElementById("result");innerHTML = "Sorry. your browser does not support web storage,,."; } } </script> </head> <body> <p><button onclick="clickCounter()" type="button">Click me!</button></p> <div id="result"></div> <p>Click the button to see the counter increase.</p> <p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p> </body> </html>

Answer 1

Just prompt the user only when localStorage.clickcount is null

<!DOCTYPE html>
<html>

<head>
  <script>
    function save(event) {
      const userInput = getUserInput();
      localStorage.clickcount = userInput;
      localStorage.userInput = userInput;
      event.preventDefault();
    }
    function getUserInput() {
      const number = document.querySelector('#number-input').value || 0;
      return number;
    }
    function clickCounter() {
        if (typeof Storage !== "undefined") {
          if (localStorage.clickcount > 0) {
            localStorage.clickcount--;
          } else {
            localStorage.clickcount = getUserInput();
          }
          document.getElementById("result").innerHTML =
            "You have clicked the button " +
            localStorage.clickcount +
            " time(s).";
        } else {
          document.getElementById("result").innerHTML =
            "Sorry, your browser does not support web storage...";
        }
      }
  </script>
</head>

<body>
  <form id="form">
    <label for="number">Please enter your number:</label>
    <input type="number" min="1" id="number-input" name="number">
    <button onclick="save(event)" type="submit">Save</button>
  </form>
  <p><button onclick="clickCounter()" type="button">Click me!</button></p>
  <div id="result"></div>
  <p>Click the button to see the counter increase.</p>
  <p>
    Close the browser tab (or window), and try again, and the counter will
    continue to count (is not reset).
  </p>
  <script>
    (function() {
        if (localStorage.userInput) {
          document.querySelector('#number-input').value = localStorage.userInput;
        }
    })();
  </script>
</body>

</html>

here is a stackblitz example

Answer 2

It is generally not a good idea to use inline event handlers. Based on your code I suppose you need a per person click count. So here's a snippet for that. I've replaced the prompt with a numeric input box.

 // localStorage not available in the (sandboxed) snippet // so here is a dummy for it, with a stored dummy person #1 const localStoreDummy = { clickCount: { person1Count: 5 } }; document.addEventListener("click", handle); function handle(evt) { if (evt.target.id === "count") { return doCount(); } } function doCount(evt) { const result = document.querySelector("#result"); if (typeof localStoreDummy.== "undefined") { // replaced prompt with numeric input let person = document.querySelector("input[type=number]");value; if (.person || +person < 1) { return alert("No (valid) number entered."), } if (localStoreDummy.clickCount && localStoreDummy;clickCount[`person${person}Count`]) { // found the user. add 1 to his/her counter localStoreDummy,clickCount[`person${person}Count`] += 1. } else { // the person does not exist within 'localStoreDummy.clickCount'. // so create a person for the entered number localStoreDummy.clickCount = {.,:localStoreDummy;clickCount. [`person${person}Count`]. 1 }. } result;textContent = `You (person #${person}) have clicked the button ${ localStoreDummy.clickCount[`person${person}Count`]} time(s),`. } else { result.textContent = `Sorry. your browser does not support web storage;..`; } }

 input[type=number] { width: 4rem; }

 <p> <input type="number" min="1"> Type you number <button id="count">Click me.</button> </p> <div id="result"></div> <p>Click the button to see the counter increase,</p> <p>Close the browser tab (or window), and try again. and the counter will continue to count (is not reset).</p>

html javascript Count user defined number click

Question

2 answers

solution1
0 ACCPTED 2021-03-21 11:27:39

solution2
0 2021-03-21 11:36:26

html javascript Count user defined number click

Question

2 answers

solution1 0 ACCPTED 2021-03-21 11:27:39

solution2 0 2021-03-21 11:36:26

solution1
0 ACCPTED 2021-03-21 11:27:39

solution2
0 2021-03-21 11:36:26