Saving input from HTML to variable outside function Javascript

Question

I am quite new to Javascript and I have veeery simple program that takes value from HTML input and then it should reassign variable car. However, the second x2 seems not to recognize the value, only the x1. I have read some articles and a few programmers do not recommend the usage of global variables, if it is not needed.I would also like to access my variables outside the function Thank you in advance for answering this stupidly simple code.

var car;

function save_car() {
    car = document.getElementById("car-text").value;
    document.getElementById("x1").innerHTML = "Your car is" + car;
}
save_car();
document.getElementById("x2").innerHTML = "Your car is " + car;

  <input id="car-text" type="text">
        <button onclick="save_car()">Save</button>
   
        <p id="x1"></p>

        <p id="x2"></p>

You need to move document.getElementById("x2").innerHTML = "Your car is " + car; inside save_car() if you want it to update on click, which also negates the need for a global variable as you can just set it to input.value as well. — pilchard
– pilchard, Commented Oct 28, 2020 at 22:51

Marc · Accepted Answer · 2020-10-28 22:58:32Z

1

The main issue is that you were setting "x2" outside of your save function.

I made a few other notes/comments in the code below.

// var car;  <-- you didn't need this global variable

function save_car() {
    let car = document.getElementById("car-text").value;
    let innerString = "Your car is " + car; // <-- we're going to reuse this, so store in variable
    document.getElementById("x1").innerHTML = innerString;
    document.getElementById("x2").innerHTML = innerString; //moved inside save_car() function
}

// save_car(); <-- you don't need this either

  <input id="car-text" type="text">
  <button onclick="save_car()">Save</button>
   
  <p id="x1"></p>
  <p id="x2"></p>

answered Oct 28, 2020 at 22:58

Marc

11.6k2 gold badges40 silver badges48 bronze badges

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

2 Comments

ricky11 Over a year ago

Thank you very much ! And how could I acces the innerString outside the function ?

Marc Over a year ago

You could (1) declare it outside and set it within the function similar to how you were doing, or (2) fetch it again where it's needed with document.getElementById("car-text").value.

Collectives™ on Stack Overflow

Saving input from HTML to variable outside function Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related