Question 46218 in Html Question posted in
Some basic documentation can be found here.

Why can't I initialize a global variable from another global variable containing an HTML element

index.html file

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="1script.js" defer></script>
<title>Document</title>
</head>

<body>
  <form id="form1" name="userInputForm"> 
   <label for="moq">MOQ:</label><br>
   <input type="number" id="moq" name="moq" onfocusout=""><br>
<br>

<div id="calculate"><input type="button" name="button" style="width: 8rem; height: 2rem;" value="Calulate"  onClick="priceResults()"></div>

</form>
</body>
</html>

enter image description here

scripts.js file

var userInputFormm = document.getElementById("form1");
//var whatMoq = userInputFormm.moq.value;

 function priceResults(){
   alert(userInputFormm.moq.value);
    }

This code as you can see runs perfectly as below.
enter image description here

but when I assign userInputFormm.moq.value to a variable whatMoq there is no result as I believe whatMoq is not able to access userInputForm. as shown below in my scripts.js and results

enter image description here

but if I create the whatMoq variable in the function priceResults(), it works like below

enter image description here
enter image description here

I want to create different functions for the same set of variables. but this problem makes me initialize the same set of variables as local variables to every function I create, which is pretty tiring because in my project, I have quite a handful of variables and my codes look to many.

enter image description here
enter image description here
it is not accessing the whatMoq variables to add the numbers.

but if I make the whatMoq variables local, it works perfectly.

enter image description here
enter image description here

so if I want to create multiple functions with these whatMoq variables, then I will have to initialize them everytime as local variables.

Is this really the only way?

Tags:

3

Answers


  1. 0

    You are:

    1. Copying the value of the input to whatMoq. This is an empty string because you’ve done it before step 2.
    2. Typing in the input which changes its value from an empty string to whatever you typed.
    3. Calling the priceResults function
    4. Alerting the value of whatMoq

    whatMoq is a copy of the value when you copy it and not a reference to the current value.

    You need to pay attention to the passage of linear time and the order in whcih things happen.

    Login or Signup to reply.
  2. 0

    The javascript (script.js) file that you have added with help of is only executed once when the page loads.

    At that time what you have done is

    1. Saved the reference of the element with id form1 in a variable userInputFormm.
    2. Created variable with whatMoq and assigned with value
      userInputFormm.moq.value;.
    3. But initially your userInputForm form object has moq input field with no initial value. (i.e. "" as its a input element with type as text).

    So when js file get compiled and run, you have variable referencing to that form and variable with whatMoq with initial value as empty string ("").

    But when you type something in input field. The userInputFormm object’s moq element value property get updated internally.

    And when you click on calculate priceResults function get called ,

    1. In first case you have reference of userInputFormm object, which has internally updated the value.So when you alert you will see the value as per input.
    2. But in second case you are not updating the whatMoq value anywhere , and js file does not re-run, thats why you are getting value as initial value i.e "" which is showing nothing on screen as its empty.

    To make it work you can do like.

    scrip.js

    var userInputFormm = document.getElementById("form1");
var whatMoq = userInputFormm.moq.value;

function handleMoqChange(e){
    whatMoq = e.target.value;
}

 function priceResults(){
  //alert(userInputFormm.moq.value);
  alert(whatMoq)
}

    index.html

    <!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="1script.js" defer></script>
<title>Document</title>
</head>

<body>
  <form id="form1" name="userInputForm"> 
   <label for="moq">MOQ:</label><br>
   <input onChange="handleMoqChange(event)" type="number" id="moq" name="moq" onfocusout=""><br>
<br>

<div id="calculate">
<input type="button" name="button" style="width: 8rem; height: 2rem;" value="Calulate"  onClick="priceResults()">
</div>

</form>
</body>
</html>
    Login or Signup to reply.
  3. 0 
    var userInputFormm = document.getElementById("form1");
var whatMoq = userInputFormm.moq.value;

    In line 2, the value for userInputFormm.moq.value isn’t defined, so when you assign it to the variable whatMoq, you assign the undefined value to the whatMoq. try console logging the userInputFormm.moq.value at line 2, and see the result.

    If you want to assign the input value to a variable, it has to be after the input value has been updated, that’s why it works when you bring line 2 into the priceResults() function.

    If you need the value in a global variable, you can define the variable and update it later when the input has value. For example:

    var userInputFormm = document.getElementById("form1");
var whatMoq = null;

function priceResults() {
  whatMoq = userInputFormm.moq.value;
  alert(whatMoq)
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search