输入只临时保存在变量、全局变量中？答案

【问题标题】：input only temporary saved in variable, global variable?输入只临时保存在变量、全局变量中？
【发布时间】：2018-01-26 20:21:20
【问题描述】：

我想从用户那里读取 2 个输入并将其从我的程序中保存。当用户输入他的输入值并提交时，将调用函数 getValue 并将值放入持续时间和间隔。但是当在 getValue 之后调用 initBuffer 时，它总是告诉我持续时间和间隔仍然为空。我以为它们是全局变量...

谁能告诉我哪里错了？非常感谢。

//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>

【问题讨论】：

在声明这些变量时需要使用“var”保留字。此外，您不应该使用 window.interval 和 window.duration。只需使用“间隔”和“持续时间”developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
@victor 我不认为这是正确的。见this
我认为这里可能没有足够的代码来确定发生了什么——很可能是一些未显示的东西导致了这种情况。请提供minimal reproducible example
我发布了更多代码。我认为 var 没有必要，因为我想声明一个全局变量...
由于main.js 和drawData.js 都丢失了，因此发布的代码无法按原样执行。这仍然不是minimal reproducible example。目前几乎没有人能够帮助您解决此问题。

标签： javascript variables input global-variables

【解决方案1】：

这不是答案，只是证明错误不在发布的代码中

// 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">

【讨论】：

谢谢，在 addEventListener 中调用 getValue 后，值会重新加载，您是否建议我应该将值存储在输入选项卡而不是全局变量中？它是如何工作的？
不要将值存储在 input 元素中，这不是一个好习惯 - 违反了干净的代码/表示分离。在此演示中更改值的唯一原因是从字面上表明您的 getValues 函数做了它应该做的事情，仅此而已。