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
– depperm, Commented Aug 10, 2021 at 15:51
Does this answer your question? Modify a variable inside a function — enzo
– enzo, Commented Aug 10, 2021 at 15:51
FYI updating a js variable will not automatically update your HTML. — takendarkk
– takendarkk, Commented Aug 10, 2021 at 15:52
HTML is not reactive, you will need to update the DOM manually. — Harsh Saini
– Harsh Saini, Commented Aug 10, 2021 at 15:53
A couple of notes: [1] your value_up() function does not update the content of your <p id="first"></p> 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
– secan, Commented Aug 10, 2021 at 15:58

haidousm · Accepted Answer · 2021-08-10 15:54:33Z

2

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>

answered Aug 10, 2021 at 15:54

haidousm

5556 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

matthew fabrie Over a year ago

Thanks you very much for your help, it's all good now!

depperm · Accepted Answer · 2021-08-10 15:58:42Z

1

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');">

answered Aug 10, 2021 at 15:58

depperm

10.8k4 gold badges46 silver badges68 bronze badges

Collectives™ on Stack Overflow

making javascript variables keep their value

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related