表單值始終以未定義的方式在Javascript中讀取

我是一名新自學的程序員，負責我的第一個家庭作業，所以如果我的命名約定關閉，我很抱歉。這是最奇怪的事情。無論我如何請求輸入值（希望拉一個數字），它總是讀取爲未定義的。表單值始終以未定義的方式在Javascript中讀取

除了拉入輸入值之外，一切都在我的javascript函數中起作用。過去我使用過表單，而且這些變量似乎很好地引用了它;我已經嘗試了document.formName.inputName.value以及document.getElementById（'input-id'）。value，並且它返回undefined。我已經多次重命名了我的表單和變量，以查看這是否是問題，而且什麼也不是。我已經嘗試了輸入類型的文本和數字，並且將不確定。

我錯過了一些什麼，因爲我有多新？請幫忙。下面的鏈接到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>

來源

2017-04-11 MissElle

因爲您在腳本運行時讀取dataInput，而不是在值更改之後。 – epascarello

移動你的變量聲明自己的函數中是這樣的：

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代碼運行後你沒有價值的功能外加載頁面（在用戶鍵入函數中的任何數字之前）。你必須在你的函數中聲明它，這樣當用戶點擊按鈕時，你可以獲得你輸入的值。

來源

2017-04-11 21:45:10 Lixus

我的天哪，完美運作。非常感謝！ – MissElle

表單值始終以未定義的方式在Javascript中讀取

回答

相關問題