Adding to a variable with a function JavaScript in HTML - Stack Overflow

IT技术

更新时间：2025-04-151

admin管理员组
文章数量:1391960

I've only started learning Javascript for a few hours, and am trying to use a function to add to a variable using JS within HTML (Sorry if I used the wrong terminology) and it doesn't seem to be changing 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>

Much thanks for any help you can give.

I've only started learning Javascript for a few hours, and am trying to use a function to add to a variable using JS within HTML (Sorry if I used the wrong terminology) and it doesn't seem to be changing 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>

Much thanks for any help you can give.

Share Improve this question edited Mar 22, 2018 at 6:55 rrk 15.9k4 gold badges30 silver badges47 bronze badges asked Mar 22, 2018 at 6:13 Ryan Johnston 534 bronze badges

As per your code, Numbup and Numdown requires arguments but you are not passing that at the time of call – Yash Parekh Commented Mar 22, 2018 at 6:16
Sorted much thanks guys – Ryan Johnston Commented Mar 22, 2018 at 7:44

Add a ment |

6 Answers 6

Sorted by: Reset to default 5

I hope this will help. Thank you.

<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>

No need to pass the arguments to the method you are calling since that argument is already a global variable.

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

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

When you define a function that accepts an argument userRep, but don't pass the value when you invoke that function, it will go as undefined and adding a number to it will result in NaN. Also that value is localized since you used the argument value for putation instead of the global value - which is why value doesn't change.

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>

remove userRep from NumUp and Numdown which is a localvariable inside the function and its value bees undefined when you dont provide.

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

Look at the code

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

This userRep is a local variable and you are trying to print the value for global variable. so that it is displaying always 0 because global didn't changed.

Also if you didn't mentioned any type in button element, that will treat as submit button. If you don't want to submit the form then just add type=button.

Solution is to remove the argument or change the name of that 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>

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>

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>

本文标签： Adding to a variable with a function JavaScript in HTMLStack Overflow

版权声明：本文标题：Adding to a variable with a function JavaScript in HTML - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1744672892a2618933.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

Adding to a variable with a function JavaScript in HTML - Stack Overflow

6 Answers 6

更多相关文章