Attempting to create a button using JavaScript, however, encountering difficulties with functionality

Question

Attempting to create a button using JavaScript, however, encountering difficulties with functionality

I'm a beginner in JavaScript and I decided to use an app to help me learn the language. In my index.html file, I have included the following code:

<div data-role="collapsible">
  <h3>Reset Score</h3>
  <button type="button" id="resetscore">Reset</button>
  <script type="text/javascript">
  function reset() {
    localStorage.setItem('total_win', 0);
    localStorage.setItem('total_lose', 0);
  }
  </script>
</div>

And as part of the footer, I added:

`<div id="scores" class="ui-grid-b">
<div class="ui-block-a">Tries left:<span id="tries_left">4</span></div>
<div class="ui-block-b">Total win:<span id="total_win">0</span></div>
<div class="ui-block-c">Total lost:<span id="total_lose">0</span></div>
</div>`

Despite my efforts, I am unable to reset the score back to zero. Even adding alert() statements inside the reset() function did not solve the issue.

If anyone has any insights on why this could be happening, I would greatly appreciate your help! Thank you!

javascript

Answer 1

Answer №1

Implementing onclick functionality:

<div data-role="collapsible">
      <h3>Reset High Score</h3>
      <button type="button" id="resetscore" onclick="reset()">Reset</button>
      <script type="text/javascript">
      function reset() {
        localStorage.setItem('total_wins', 0);
        localStorage.setItem('total_losses', 0);
      }
      </script>
    </div>

The function is defined but not invoked anywhere. To trigger the function, it should be called within the onclick event of the button.

Answer 2

Implementing onclick functionality:

<div data-role="collapsible">
      <h3>Reset High Score</h3>
      <button type="button" id="resetscore" onclick="reset()">Reset</button>
      <script type="text/javascript">
      function reset() {
        localStorage.setItem('total_wins', 0);
        localStorage.setItem('total_losses', 0);
      }
      </script>
    </div>

The function is defined but not invoked anywhere. To trigger the function, it should be called within the onclick event of the button.

Answer 3

Answer №2

It is recommended to include an event listener for the click event in your code.

Your ability to modify the DOM can be enhanced by altering the inner HTML, as demonstrated below:

document.getElementById('resetscore').addEventListener('click',function() {
            //localStorage.setItem('total_win', 0);
            //localStorage.setItem('total_lose', 0);
            document.getElementById('total_win').innerHTML = 0;
            document.getElementById('total_lose').innerHTML = 0;
          });
     document.getElementById('win').addEventListener('click',function(){
            var a = parseFloat(document.getElementById('total_win').innerHTML);
            document.getElementById('total_win').innerHTML = (a+1).toFixed(0);
});
   document.getElementById('loss').addEventListener('click',function(){
           var b = parseFloat(document.getElementById('total_lose').innerHTML);
            document.getElementById('total_lose').innerHTML = (b+1).toFixed(0);       
});

<div data-role="collapsible">
      <h3>Reset Score</h3>
      <button type="button" id="resetscore">Reset</button>
      <button type="button" id="win">+1 Win</button>
      <button type="button" id="loss">+1 Loss</button>
    </div>
    <div id="scores" class="ui-grid-b">
    <div class="ui-block-a">Tries left:<span id="tries_left">4</span></div>
    <div class="ui-block-b">Total win:<span id="total_win">0</span></div>
    <div class="ui-block-c">Total lost:<span id="total_lose">0</span></div>
    </div>

Keep in mind that script tags should not be enclosed within a div element. To ensure proper functionality, place all JavaScript code at the end of the body section, just before the closing tag, following the completion of all HTML content.

Answer 4

It is recommended to include an event listener for the click event in your code.

Your ability to modify the DOM can be enhanced by altering the inner HTML, as demonstrated below:

document.getElementById('resetscore').addEventListener('click',function() {
            //localStorage.setItem('total_win', 0);
            //localStorage.setItem('total_lose', 0);
            document.getElementById('total_win').innerHTML = 0;
            document.getElementById('total_lose').innerHTML = 0;
          });
     document.getElementById('win').addEventListener('click',function(){
            var a = parseFloat(document.getElementById('total_win').innerHTML);
            document.getElementById('total_win').innerHTML = (a+1).toFixed(0);
});
   document.getElementById('loss').addEventListener('click',function(){
           var b = parseFloat(document.getElementById('total_lose').innerHTML);
            document.getElementById('total_lose').innerHTML = (b+1).toFixed(0);       
});

<div data-role="collapsible">
      <h3>Reset Score</h3>
      <button type="button" id="resetscore">Reset</button>
      <button type="button" id="win">+1 Win</button>
      <button type="button" id="loss">+1 Loss</button>
    </div>
    <div id="scores" class="ui-grid-b">
    <div class="ui-block-a">Tries left:<span id="tries_left">4</span></div>
    <div class="ui-block-b">Total win:<span id="total_win">0</span></div>
    <div class="ui-block-c">Total lost:<span id="total_lose">0</span></div>
    </div>

Keep in mind that script tags should not be enclosed within a div element. To ensure proper functionality, place all JavaScript code at the end of the body section, just before the closing tag, following the completion of all HTML content.

Answer 5

Answer №3

Include the following snippet:

<button type="button" onclick="reset()" id="resetscore">

Specify which function to utilize, pay attention to the onclick attribute, triggering the reset function on click

Answer 6

Include the following snippet:

<button type="button" onclick="reset()" id="resetscore">

Specify which function to utilize, pay attention to the onclick attribute, triggering the reset function on click

Answer 7

Answer №4

Make sure that your button triggers the reset function

<button id="resetButton" onclick="resetScore()">Reset Score</button>

Answer 8

Make sure that your button triggers the reset function

<button id="resetButton" onclick="resetScore()">Reset Score</button>

Attempting to create a button using JavaScript, however, encountering difficulties with functionality

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for displaying real-time error notifications from server-side validation using AJAX

Struggling to fetch the last and first name from a document in Firestore using VueJs

Mysterious sayings encircling the words fetched through ajax

Determine the originating component in React by identifying the caller

Is it possible to implement JavaScript infinite currying for addition that allows for an unlimited number of function calls and an unlimited number

Typing into the styled M-UI TextFields feels like a never-ending task when I use onChange to gather input field data in a React project

How can the outer function be connected to the resolve method of $routeProvider?

Tips for initializing and updating a string array using the useState hook in TypeScript:1. Begin by importing the useState hook from the

Leverage AJAX for real-time Django Model updates

Ways to Refresh JSONObject Data

Exploration of how modals are constantly refreshing with each modal switch

Displaying a date and time beautifully in jQuery/JavaScript by providing the day of the week along with the specific time

What is the best way to transform a JavaScript array into a neatly formatted JSON string?

Is there a way to transfer a component as a prop to another component in React?

What is the best way to conceal the header on a 404 error page?

Inheritance best practices for node.js applications

Manually adjust rotation in Three.js by clicking

Adjust the width to ensure the height is within the bounds of the window screen?

Upon upgrading to webpack 5.x, I encountered the error message `Error: getaddrinfo ENOTFOUND localhost:8081` when trying to run `npm run serve`. What could be causing

JavaScript code for downloading data through AJAX and then loading a chart is not functioning as expected