Question

我想从用户那里读取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>

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

输入只是临时保存在变量，全局变量中？

1 个答案: