making javascript variables keep their value

Question

I am very new to Javascript and I was wondering if anyone could help me for what seems to be quite a simple question to anyone who knows anything about JS. My problem is that I am trying to change the value of my variables after declaring them but everytime I change their values they are set back to what they used to be when they got declared. If anyone could please explain how I could work my way around this problem it would be greatly appreciated, Here's my code if you want to see it:

//Anything before this doesn't matter for my question.
                          <td>
                            <p id="first"></p> <--- this prints the "first" var declared in the script bellow but is always equal to 1 even when the button is pressed
                          </td>
                          <th class="col-xs-1 align-middle text-center">
                            <div class="btn-group">
                                <a class="btn btn-default btn-sm btn-add-all" onclick="value_up(first);"> <--- this is the button that calls the function when pressed
                                    <i class="fa fa-arrow-up"></i>
                                </a>
                            </div>
                        <script>
                            var first = 1; <--- this is where I declare my variable
                            document.getElementById("first").innerHTML = first; <--- Here's where I pass my variable to the <p> tags up above
                        </script>
                    </tbody>
                  </table>
            </div>
        </div>
    </div>

    <script>
        function value_up(x) { <--- this is the function I am calling when I press the up button
            x = x - 1;
            console.log(x);
            return (x);
        }
    </script>

do you need to use pure html/js or can you use an external library like svelte, vue, or angular? — depperm, Aug 10 '21 at 15:51
Does this answer your question? [Modify a variable inside a function](https://stackoverflow.com/questions/21978392/modify-a-variable-inside-a-function) — enzo, Aug 10 '21 at 15:51
I only have access to pure HTML and JS so I can't use any external libraries — matthew fabrie, Aug 10 '21 at 15:52
FYI updating a js variable will not automatically update your HTML. — takendarkk, Aug 10 '21 at 15:52
`value_up(first)` and then `x = x - 1` doesn't make any sense — depperm, Aug 10 '21 at 15:52
HTML is not reactive, you will need to update the DOM manually. — Harsh Saini, Aug 10 '21 at 15:53
It's called value up because I am printing numbers in ascending order so if you press the button up, the value of first should go down to be smaller than what is already there — matthew fabrie, Aug 10 '21 at 15:54
A couple of notes: [1] your `value_up()` function does not update the content of your `
` tag. [2] Some browsers create a global variable for each element with an ID, therefore it is better to avoid using "first" for both your paragraph ID and variable name, as it might generate a conflict. — secan, Aug 10 '21 at 15:58
alright thanks for the tips I never used Javascript before so everything you guys are telling me is greatly helping me! — matthew fabrie, Aug 10 '21 at 16:01

score 2 · Accepted Answer · answered Aug 10 '21 at 15:54

You're returning x but never setting first to x. As such, first never changes. Values are passed in by value in javascript and so you need to change the value of first directly instead of just passing it in. You also need to reupdate the value that your HTML element holds. Please check the following example:

let first = 0
document.getElementById("first-val").innerHTML = first;
let increment_first = () =>{
  first += 1
  document.getElementById("first-val").innerHTML = first;
 
}

<p> Value of first: <span id="first-val"></span></p>
<button onclick="increment_first()">Increment!</button>

Thanks you very much for your help, it's all good now! – matthew fabrie Aug 10 '21 at 16:03 — matthew fabrie, Aug 10 '21 at 16:03

score 1 · Answer 2 · answered Aug 10 '21 at 15:58

To be slightly more robust pass the id and then get/set using the passed id

var first = 1; 
document.getElementById("first").innerHTML = first;

function value_up(id) {
  var x = parseInt(document.getElementById(id).textContent)
  x+=1 // or whatever operation you want
  document.getElementById(id).innerHTML = x
}

<p id="first"></p>
<input type="button" value="UP"  onclick="value_up('first');">

making javascript variables keep their value

2 Answers2