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

Html – How to access a global variable in a different function

I have a global variable ‘input’ and it’s value is assigned in the function
processinput. But if I try to access the value input inside a different function, the value is displayed undefined.

Code:

<!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">
    <title>Visualization</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
    <style>
      /* Your CSS styles here */
    </style>
  </head>
  <body>
    <div class="graph-container">
      <div id="network" class="main-panel"></div>
      <div id="graph" class="side-panel">
        <div class="arrow"></div>
      </div>
    </div>

    <label for="quantity">Enter the value</label>
    <input type="text" id="quantity">
    <button id="submit" onclick="processInput()">Submit</button>

    <script>
      var input;
      function processInput() {
        input = document.getElementById("quantity").value;
        console.log(input);
      }

      document.addEventListener("DOMContentLoaded", function() {
        // Rest of your code...
        console.log(input);
        // Fetch JSON data, initialize graph, and set up event listeners

      });
    </script>
  </body>
</html>

Suggestions on how to access the value of input outside processInput function will be really helpful.

EDIT:
Thanks for the comments. For instance, if I try to display the value of input outside the processInput function, it is undefined.

<!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">
    <title>Visualization</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
    <style>
      /* Your CSS styles here */
    </style>
  </head>
  <body>
    <div class="graph-container">
      <div id="network" class="main-panel"></div>
      <div id="graph" class="side-panel">
        <div class="arrow"></div>
      </div>
    </div>

    <label for="quantity">Enter the value</label>
    <input type="text" id="quantity">
    <button id="submit" onclick="processInput()">Submit</button>

    <script>
      var input;
      function processInput() {
        input = document.getElementById("quantity").value;
        console.log(input);
      }

      function test() {
        // Rest of your code...
        console.log(input);
        // Fetch JSON data, initialize graph, and set up event listeners

      };
      console.log(input);

    </script>
  </body>
</html>
Tags:

2

Answers


  1. 0

    Did you try to give a value to var input ?

    I think it doesn’t work because you don’t give a value, you only give a value in the processInput function.

    Login or Signup to reply.
  2. 0

    Your global input variable has no value on page load. And it will never have a value just after you assign something to it. Which you do but in your processInput() function which only called on submit button click.

    Javascript runs as soon as you load the page and it will print the undefined global input variable before you even call the processInput() function.

    I suggest that you assign a value as soon as the javascript runs like this:

    <script>

// This way your input will contain a reference to the element which has an id of "quantity"
var inputElem = document.getElementById("quantity");

// Prints nothing because the input element has no assigned default value
console.log( inputElem.value );

</script>

    In your process input function you can assign a value to an other variable if you want to, something like this:

    <script>

var inputElem = document.getElementById("quantity");
var inputText;

/*
This function will be called on submit button click and it will add
the value of the inputElem to the inputText variable. Later you can 
use inputText anywhere.
*/
function processInput(){
    inputText = inputElem.value;
}

// The below code still prints nothing because the processInput() function does not run at this point in time.
console.log(inputText);    

</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search