表單值始終在Javascript中讀取為未定義

Question

我是一個新的自學成才的程序員，從事第一次家庭作業，因此，如果我的命名約定不對，我深表歉意。 這是最奇怪的事情。 無論我如何請求輸入值（希望拉一個數字），它總是讀為未定義。

除了提取輸入值外，所有內容都可以在我的javascript函數中正常工作。 我過去使用過表格，變量似乎很好地引用了表格； 我已經嘗試了document.formName.inputName.value和document.getElementById（'input-id'）。value，並且返回未定義。 我已經多次重命名了表單和變量，以查看是否是問題所在，而且一無所獲。 我已經嘗試了輸入類型的文本和數字，但我不確定。

我是不是很陌生，是因為我很新？ 請幫忙。 鏈接到下面的github和jsfiddle。

https://github.com/MissElle/calculator?files=1 https://jsfiddle.net/MissElle/qf7xL8gj/

var dataInput = document.compute.calculate.value;
var element = Number(dataInput);
var numCount = document.getElementById('count');
var numSum = document.getElementById('sum');
var numMean = document.getElementById('mean');

var subCount = [];
var subSum = 0; 
var starColors = ['#51fffc', '#ffff96', '#96ffc7', '#f8d8ff', '#d2bfff', '#ffbfbf', '#ffd299', '#ffffff', '#000000'];

function calcData(element) {
  if(typeof element === 'number') {
    console.log(element);
    subCount.push(element);
    var starDiv = document.createElement('div');
    starDiv.className = 'star';
    var starHolder = document.getElementById('star-holder');
    starHolder.appendChild(starDiv);
    starDiv.style.background = 'radial-gradient(circle, ' + starColors[Math.floor(Math.random() * starColors.length)] + ', transparent, transparent)';
    numCount.innerHTML = subCount.length;
    for(var i in subCount) {
      subSum += subCount[i];
      numSum.innerHTML = subSum;
      var subMean = subSum/subCount.length;
      numMean.innerHTML = subMean;
    }
  }else {
    numCount.innerHTML = 'Not a Number';
    console.log(element);
  }
  subSum = 0;
  event.preventDefault();
}


function clearData() {
  subCount = [];
  subSum = 0;
  subMean = 0;
  numSum.innerHTML = '';
  numMean.innerHTML = '';
  numCount.innerHTML = '';

  var starHolder = document.getElementById('star-holder');
  var starDiv = starHolder.getElementsByClassName('star');

  while(starDiv.length > 0) {
    starHolder.removeChild(starDiv[0]);
  }
}


<form name="compute" onsubmit="calcData()" onReset="clearData()">
         <p class="bold">Please enter a number</p>
         <input type="number" name="calculate" id="calculation" step="any"><br>
        <input type="submit" name="submit" value="star">
        <input type="reset" value="nostar" name="clearForm">
         <div class="row">
           <div class="typevalue"><h4>Count:</h4><h4>Sum:</h4><h4>Mean:</h4></div>
           <div class="numbervalue"><p id="count"></p><p id="sum"></p><p id="mean"></p></div>
        </div>
      </form>

Answer 1

像這樣在函數中移動變量聲明：

function calcData(element) {
    var dataInput = document.compute.calculate.value;
    var element = Number(dataInput);
    var numCount = document.getElementById('count');
    var numSum = document.getElementById('sum');
    var numMean = document.getElementById('mean');
    var subCount = [];
    var subSum = 0; 
    var starColors = ['#51fffc', '#ffff96', '#96ffc7', '#f8d8ff', '#d2bfff', 
        '#ffbfbf', '#ffd299', '#ffffff', '#000000'];
...

如果在函數外聲明dataInput沒有任何值，因為該JS代碼在頁面加載后運行（在用戶在函數中鍵入任何數字之前）。 您必須在函數中聲明它，這樣才能在用戶單擊按鈕時獲得輸入的值。