Question 108432 in Html Question posted in
Some basic documentation can be found here.

making a counter with javascript in html

I’ve been trying to make a primitive reaction tester and tried to add a counter so it counts the amount of clicks you’ve made, but it just won’t work. Could you tell me what i did wrong?

<html>
    <head>
        <meta charset="utf-8">
        <title>
            Reaction
        </title>
        <style>
            body {
                background-color: lightgray;
                margin: 0;
                overflow-y: hidden;
                overflow-x: hidden;
                height: 100%;
                width: 100%;
                font: normal 10px sans-serif;
            }
            #screen {
                position: relative;
                background-color: gray;
                width: 60vw;
                height: 50vh;
                left: 20vw;
                top: 25vh;
                border: solid 0.5vh dimgray;
                text-align: center;
            }
            #screen_reaction {
                position: relative;
                background-color: red;
                border: solid 0.1vh darkred;
                width: 1vw;
                height: 1vw;
                left: 0;
                top: 0;
            }
        </style>
        <script>
            var counter = 0;
            function reaction() {
                counter = document.getElementById("count").value;
                counter += 1;
                document.getElementById("count").value = counter
                var margin = document.querySelector('#screen_reaction');
                top_margin = (Math.random() * 97);
                left_margin = (Math.random() * 95);
                margin.style.top = `${top_margin}%`
                margin.style.left = `${left_margin}%`
            }
        </script>
    <head>
    <body>
    <font size="10"><a id="count" style="position: relative; left: 48vw; top: 25vh">0</a></font>
    <div id="screen">
        <div id="screen_reaction" onClick="reaction()">
        </div>
    </div>
    </body>
</html>

I added var counter = 0; thinking the code just doesnt know the variable, tried changing names, looked for errors in compilation but nothing. What’s wrong with this script?

Tags:

3

Answers


  1. 0

    You should update the line counter = document.getElementById("count").value; to counter = parseInt(document.getElementById("count").innerHTML);. Also, you should remove the value attribute from the count element since it’s an anchor element and not an input element.

    <html>
    <head>
        <meta charset="utf-8">
        <title>
            Reaction
        </title>
        <style>
            body {
                background-color: lightgray;
                margin: 0;
                overflow-y: hidden;
                overflow-x: hidden;
                height: 100%;
                width: 100%;
                font: normal 10px sans-serif;
            }
            #screen {
                position: relative;
                background-color: gray;
                width: 60vw;
                height: 50vh;
                left: 20vw;
                top: 25vh;
                border: solid 0.5vh dimgray;
                text-align: center;
            }
            #screen_reaction {
                position: relative;
                background-color: red;
                border: solid 0.1vh darkred;
                width: 1vw;
                height: 1vw;
                left: 0;
                top: 0;
            }
        </style>
        <script>
            var counter = 0;
            function reaction() {
                counter += 1;
                document.getElementById("count").innerHTML = counter;
                var margin = document.querySelector('#screen_reaction');
                top_margin = (Math.random() * 97);
                left_margin = (Math.random() * 95);
                margin.style.top = `${top_margin}%`
                margin.style.left = `${left_margin}%`
            }
        </script>
    <head>
    <body>
    <font size="10"><a id="count" style="position: relative; left: 48vw; top: 25vh">0</a></font>
    <div id="screen">
        <div id="screen_reaction" onClick="reaction()">
        </div>
    </div>
    </body>
</html>
    Login or Signup to reply.
  2. 0

    i redo your code and now it can count as you wish

    var counter = 0;
function reaction(e) {
 counter++;
 document.getElementById("count").innerHTML = counter;
 var margin = document.querySelector('#screen_reaction');
 top_margin = (Math.random() * 97);
 left_margin = (Math.random() * 95);
 margin.style.top = `${top_margin}%`
 margin.style.left = `${left_margin}%`
}
    Login or Signup to reply.
  3. 0

    You need to get the value inside the tag first (.textContent)
    Then you have to convert to an integer (parseInt())

    <html>
    <head>
        <meta charset="utf-8">
        <title>
            Reaction
        </title>
        <style>
            body {
                background-color: lightgray;
                margin: 0;
                overflow-y: hidden;
                overflow-x: hidden;
                height: 100%;
                width: 100%;
                font: normal 10px sans-serif;
            }
            #screen {
                position: relative;
                background-color: gray;
                width: 60vw;
                height: 50vh;
                left: 20vw;
                top: 25vh;
                border: solid 0.5vh dimgray;
                text-align: center;
            }
            #screen_reaction {
                position: relative;
                background-color: red;
                border: solid 0.1vh darkred;
                width: 1vw;
                height: 1vw;
                left: 0;
                top: 0;
            }
        </style>
        
    <head>
    <body>
    <font size="10"><a id="count" style="position: relative; left: 48vw; top: 25vh">0</a></font>
    <div id="screen">
        <div id="screen_reaction" onClick="reaction()">
        </div>
    </div>
    <script>
        let counter = document.getElementById("count");
        function reaction() {
            counter.textContent = parseInt(counter.textContent)+ 1;
            document.getElementById("count").value = counter
            var margin = document.querySelector('#screen_reaction');
            top_margin = (Math.random() * 97);
            left_margin = (Math.random() * 95);
            margin.style.top = `${top_margin}%`
            margin.style.left = `${left_margin}%`
        }
    </script>
    </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search