All geek questions in one place

Adding to a variable with a JavaScript function in HTML

I just started learning Javascript in a few hours, and I'm trying to use a function to add to a variable using JS in HTML (sorry if I used the wrong terminology), and it doesn't seem to change the result.

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>
            var userID = 1;
            var userRep = 0;
            function NumUp(userRep) {
                userRep = userRep + 1;
            }
            function NumDown(userRep) {
                userRep = userRep - 1;
            }
            function myFunction() {
                document.getElementById("demo").innerHTML = userRep;
            }
        </script>
    </head>
    <body>
        <form action="Reputation.JS">
            <div class="container">
                <p>result goes here</p>
                <button type="button" onclick="NumUp()" id="voteUp">Vote Up</button>
                <button type="button" onclick="NumDown()" id="voteDown">Vote Down</button>
                <label id="lbl"></label>
                <button onclick="myFunction()">Click me</button>
                <p id="demo"></p>
            </div>
        </form>
    </body>
</html>

Thanks so much for any help you can give.

+4
source share
6 answers

Hope this helps. Thank.

<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        var userID = 1; 
        var userRep = 0;
        function NumUp(){
            userRep = userRep + 1;
            myFunction();
        }
        function NumDown(){
            userRep = userRep - 1;
            myFunction();
        }

        function myFunction() {
        document.getElementById("demo").innerHTML = userRep;
        }
    </script>

</head>
<body>

<form action="Reputation.JS">
        <div class="container">
            <p>result goes here</p>
            <button type ="button" onclick="NumUp()"  id="voteUp">Vote Up</button> 
            <button type ="button" onclick="NumDown()"  id="voteDown">Vote Down</button>
            <label id="lbl"></label>
            <button onclick="myFunction()">Click me</button>
            <p id="demo"></p>

        </div>
    </form>

</body>
Run codeHide result
+5
source

There is no need to pass arguments to the method you are calling, because this argument is already a global variable.

function NumUp() {
  userRep = userRep + 1;
}

function NumDown() {
  userRep = userRep - 1;
}

, userRep, , undefined, NaN. , , , .

Demo

<html>

<head>
  <title>TODO supply a title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script>
    var userID = 1;
    var userRep = 0;

    function NumUp() {
      userRep = userRep + 1;
    }

    function NumDown() {
      userRep = userRep - 1;
    }

    function myFunction() {
      document.getElementById("demo").innerHTML = userRep;
    }
  </script>

</head>

<body>

    <div class="container">
      <p>result goes here</p>
      <button type="button" onclick="NumUp()" id="voteUp">Vote Up</button>
      <button type="button" onclick="NumDown()" id="voteDown">Vote Down</button>
      <label id="lbl"></label>
      <button onclick="myFunction()">Click me</button>
      <p id="demo"></p>

    </div>

</body>
Hide result
+3

userRep NumUp Numdown, , undefined, .

function NumUp(){
         userRep = userRep + 1;
    }
function NumDown(){
         userRep = userRep - 1;
    }
+3

function NumUp(userRep){
     userRep = userRep + 1;
}

userRep , . 0, global .

Also, if you did not specify any typein element buttonthat will be treated as a button submit. If you do not want to submit the form, just add type=button.

The solution is to remove the argument or change the name of this argument in your function.

var userID = 1; 
        var userRep = 0;
        function NumUp(){
            userRep = userRep + 1;
        }
        function NumDown(){
            userRep = userRep - 1;
        }

        function myFunction() {
        document.getElementById("demo").innerHTML = userRep;
        }
<form action="Reputation.JS">
        <div class="container">
            <p>result goes here</p>
            <button type ="button" onclick="NumUp()"  id="voteUp">Vote Up</button> 
            <button type ="button" onclick="NumDown()"  id="voteDown">Vote Down</button>
            <label id="lbl"></label>
            <button type="button" onclick="myFunction()">Click me</button>
            <p id="demo"></p>

        </div>
    </form>
Run codeHide result
+2
source

Use the following

<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        var userID = 1;
        var userRep = 0;
        function NumUp () {
            userRep = userRep + 1;
        }
        function NumDown () {
            userRep = userRep - 1;
        }

        function myFunction (event) {
            event.preventDefault();
            document.getElementById("demo").innerHTML = userRep;
        }
    </script>

</head>
<body>
    <form action="Reputation.JS">
        <div class="container">
            <p>result goes here</p>
            <button type ="button" onclick="NumUp()"  id="voteUp">Vote Up</button>
            <button type ="button" onclick="NumDown()"  id="voteDown">Vote Down</button>
            <label id="lbl"></label>
            <button onclick="myFunction(event)">Click me</button>
            <p id="demo"></p>
        </div>
    </form>
</body>
+1
source

This will help you remove userRep from NumUp and Numdown, which is a local variable inside the function

<html>
            <head>
            	<title>TODO supply a title</title>
              	<meta charset="UTF-8">
              	<meta name="viewport" content="width=device-width, initial-scale=1.0">
              	<script type="text/javascript">
                		var userID = 1;
                		var userRep = 0;
                		function NumUp() {
                  			userRep = userRep + 1;
                		}
                		function NumDown() {
                  			userRep = userRep - 1;
                		}
                		function myFunction() {
                  			document.getElementById("demo").innerHTML = userRep;
                		}
              	</script>
            </head>
            <body>
            	<div class="container">
                  		<p>result goes here</p>
                  		<button type="button" onclick="NumUp()" id="voteUp">Vote Up</button>
                  		<button type="button" onclick="NumDown()" id="voteDown">Vote Down</button>
                  		<label id="lbl"></label>
                  		<button onclick="myFunction()">Click me</button>
                  		<p id="demo"></p>
                </div>
            </body>
 </html>
Run codeHide result
+1
source

Source: https://habr.com/ru/post/1695191/

More articles:


All Articles