Call a global variable into two functions using JavaScript

Question

I have a global variable:

var x = document.getElementById("Node").value;

Where the value is determined by a text box with the ID of "Node".

I have two functions that don't same thing if creating preset notes based on values entered into text and drop downs. How do I call the above global variable into those functions and have it added to the created statement. Both functions look the same:

This works for one function but not when there is two. What I have is several text boxes and drop downs. One of those text boxes is a global value called Node. When node is filled out, I want to be able to pull that value into both functions. Here is what I have for both.

//Declare Node as a Global Variable
var x = document.getElementById("Node").value;

//Populates the Summary box
function mySummary() {
    var a = document.getElementById("Field1").value;
    var b = document.getElementById("Field2").value;
    var c = document.getElementById("Field3").value;
    var d = document.getElementById("Field4").value;
    document.getElementById("Summary").innerHTML = a + " - " + b + " - " + c + " - " + x + " -" + d;
}

//Populates the Notes box
function myNotes() {
    var a = document.getElementById("Field5").value;
    var b = document.getElementById("Field6").value;
    var c = document.getElementById("Field7").value;
    var d = document.getElementById("Field8").value;
    var e = document.getElementById("Field9").value;
    document.getElementById("Notes").innerHTML = x + " - " + a + " / " + b + " - " + c + "% Offline - " + d + " - " + e + " - " + f;
}

The issue is that the value of X is not being pulled into both functions at the same time for the output. The output goes into a text area

If I create a local variable in each function and make the user enter the same information twice per text box it works fine, but I want them to only enter the information once and have it pulled into each text area

`global variable` = that would be `x` - chances are that `x` is not the value you think it is, because it is set once, when that code is executed, so, it doesn't dynamically change when whatever #Node.value changes — Jaromanda X, Oct 23 '17 at 08:34
Possible duplicate of [How to declare a global variable in a .js file](https://stackoverflow.com/questions/944273/how-to-declare-a-global-variable-in-a-js-file) — Nikola Lukic, Oct 23 '17 at 08:36
Learning [scopes](https://www.w3schools.com/js/js_scope.asp) could be useful ! — 3Dos, Oct 23 '17 at 08:37

score 0 · Answer 1 · answered Oct 23 '17 at 08:43

0

You can simply use:

window.x = document.getElementById("Node").value;

answered Oct 23 '17 at 08:43

Ethan

3,410
1
28
49

That pulls the value of the text box into the first function, but when I add it to the second function it doesn't call it. The functions post into a text box the values of the fields that are filled out into a single string. I can call the node into one function or the other but not both at the same time as the field is filled out – Michael Oct 23 '17 at 09:14

Nisal Edu · Answer 2 · 2017-10-23T14:39:48.790

0

Try this

(function() {
    var x = document.getElementById("Node").value;
    document.getElementById("Node").onchange = function() {
      myNode()
    };
    document.getElementById("mySelect1").onchange = function() {
      myNotes()
    };
    document.getElementById("mySelect2").onclick = function() {
      summary()
    };
    
     function myNode() {
      x = document.getElementById("Node").value;
    }

    function summary() {
      var a = document.getElementById("mySelect1").value;
      var b = document.getElementById("mySelect2").value;
      document.getElementById("5").value = a + " - " + b + " - " + x;
    }

    function myNotes() {

      var a = document.getElementById("mySelect1").value;
      var b = document.getElementById("mySelect2").value;
      document.getElementById("4").value = a + " + " + b + " + " + x;
    }


  }





)();

Notes : <input type="text" id="4" /><br> Summary : <input type="text" id="5" /><br>
<select id="Node">
  <option value="w">w
  <option value="x">x
  <option value="y">y
  <option value="z">z
</select>
<select id="mySelect2">
  <option value="a">a
  <option value="b">b
  <option value="c">c
  <option value="d">d
</select>
<select id="mySelect1">
  <option value="1">1
  <option value="2">2
  <option value="3">3
  <option value="4">4
</select>

edited Oct 23 '17 at 14:39

answered Oct 23 '17 at 09:26

Nisal Edu

7,237
4
28
34

This works for one function but not when there is two. – Michael Oct 23 '17 at 09:33
Try now declare x out side and initialize it inside the function – Nisal Edu Oct 23 '17 at 10:35
still won't call it into the second function, only the first one – Michael Oct 23 '17 at 11:08
I'm still not able to pull the variable into both functions. I updated my code example, using that what would be the way to do it. – Michael Oct 23 '17 at 13:02
The page I have setup has the user enter in information into text boxes and drop downs. My current script grabs the information and combines it together into a textarea which works correctly. The issue is I have a field called "Node" which I want to populate in both text areas but without the user having to enter it in twice. Esentially I want the user to enter in the Node once, then have both functions grab the text, and place into a textarea. It all currently happens using an onChange function, no buttons which is what I want to setup – Michael Oct 23 '17 at 14:02
Did you find out a solution if you not try edited code might help you – Nisal Edu Oct 23 '17 at 14:40

Call a global variable into two functions using JavaScript

2 Answers2

Linked