input only temporary saved in variable, global variable?

Question

I want to read 2 inputs from user and save it from my program. When the user types his input value and submits, the function getValue will be called and values will be put into duration and interval. But when initBuffer is called after getValue, it always tell me that duration and interval are still null. I thought they are global variables...

Can somebody please tell me where I am wrong? Thanks a lot.

//main.js

var duration = null;
var interval = null;


function getValue(){
    interval = parseInt(document.getElementById('interval').value);
    duration = parseInt(document.getElementById('duration').value);
    console.log(window.interval);
    if(isNaN(window.interval) || isNaN(window.duration) ){
        alert("please give 2 values at the same time");
    }
    console.log("duration: "+ window.duration + "interval:" + window.interval);

}

function start(){
    initBuffer();
}

function initBuffer(){
    alert(window.duration);
    if(window.duration == null){
        console.log('duration set to default: 40');
        window.duration = 40; //default (min)
    } 
    if(window.interval == null){
        console.log('interval set to default: 5');
        window.interval = 5; //default
    }
    numSamples= Math.floor(duration* 60 /interval);
}




<html>
<head>
    <meta charset="utf-8">
    <title>Graph</title>
</head>
<style>
    #start {
        position:absolute;
        left:1080px;
        top: 30px;
        width:30px;
        height:30px;
        background: #2280ff;
        font-size: 12px;
        color: white;
        border-radius: 10px;
        padding: 1em;

    }
.div-inline{
    display: inline
}
</style>

<body>
<form id = "hint">
    <div class = "div-inline">
        Interval:
        <input type="text" name="interval" id = "interval">(s)
    </div>
    <div class = "div-inline">
        Duration:
        <input type = "text" name = "duration" id = "duration">(min)
        <input type = "submit" value = "submit" onclick = "getValue() return false">
    </div>

  <br>
  (Default: Interval = 5s, Duration = 40 min)
</form>

<script type="text/javascript">

</script>


<div id = "sec1">
    <canvas id = "display" width = "1024" height = "300"></canvas>
</div>
<div id = "start" onclick = "start()" >start</div>
<script src = "main.js" charset="utf-8"></script>    
</body>
</html>

you need to use the 'var' reserve word when declaring those variables. Also, you shouldnt have to use window.interval and window.duration. just use 'interval' and 'duration' https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var — victor, Jan 26 '18 at 20:22
@victor I don't believe that's correct. See [this](https://stackoverflow.com/a/1470494/2487517) — Tibrogargan, Jan 26 '18 at 20:26
I think there's probably not enough code here to determine what's going on - it's probable that something not shown is contributing to this. Please provide an [mcve] — Tibrogargan, Jan 26 '18 at 20:30
I posted some more codes. I think var is not necessary because I want to declare a global variable... — Xing Ying Chen, Jan 26 '18 at 21:33
The code as posted cannot be executed as-is since `main.js` and `drawData.js` are both missing. This is still not an [mcve]. There is currently very little likelihood anyone will be able to help you solve this issue. — Tibrogargan, Jan 27 '18 at 22:59
Hi, thanks for your advice, I don't know how to add a second code file so I commented my code. Actually I've solved the problem by adding "return false" after getValue in , so the browser won't automatically update the window and it works. I think it has little to do with global variable declaration. Thanks for your help again! — Xing Ying Chen, Jan 30 '18 at 21:18

Tibrogargan · Answer 1 · 2018-01-26T20:41:59.007

This is not an answer, just demonstrating that the fault is not in the posted code

// start of posted code
duration = null;
interval = null;
function getValue() {
      window.interval = parseInt(document.getElementById('interval').value);
      window.duration = parseInt(document.getElementById('duration').value);
      if(isNaN(window.interval) || isNaN(window.duration) ){
        alert("please give 2 values at the same time");
      }
    }

    function initBuffer(){
      if(window.duration == null){
            console.log('duration set to default: 40');
            window.duration = 40; //default (min)
      }  
      if(window.interval == null){
         console.log('interval set to default: 5');
         window.interval = 5; //default
      }
      numSamples= Math.floor(duration* 60 /interval);
   }
// end of posted code

// test code
function test() {
  console.log(`duration: ${duration}, interval: ${interval}`);
}

test();

function test2() {
  console.log(`duration: ${window.duration}, interval: ${window.interval}`);
}

test2()

window.addEventListener("DOMContentLoaded", function() {
  document.getElementById('test').addEventListener('click', test);
  test();
  initBuffer();
  test();
  duration = 10;
  interval = 10;
  test();
  getValue();
  test();
});

<button id="test" type="button">test</button>
<input type="text" id="interval" value="20">
<input type="text" id="duration" value="30">

Thanks, after you call getValue in addEventListener, values are reloaded, are you suggesting that I should store values in input tabs instead of in my global variables? How does that work? — Xing Ying Chen, Jan 26 '18 at 21:36
Do not store values in `input` elements, it's not a good practice - violates clean code/presentation separation. The only reason the values are being changed in this demonstration is to literally show that your `getValues` function does what it's supposed to do, nothing more. — Tibrogargan, Jan 26 '18 at 22:34

input only temporary saved in variable, global variable?

1 Answers1