Question

我是一名新的自学成才的程序员，正在完成我的第一份家庭作业，所以如果我的命名惯例不合适，我会道歉。这是最离奇的事情。无论我如何请求输入值，（希望拉一个数字）它总是读取为undefined。

除了拉取输入值之外，一切都在我的javascript函数中有效。我过去使用过表单，变量似乎引用得很好;我已经尝试了document.formName.inputName.value，以及document.getElementById（＆＃39; input-id＆＃39;）。值，它返回undefined。我已经多次重命名我的表单和变量，看看是不是问题而且没什么。我已经尝试了输入类型的文本和数字，并且stI＆lt; ll 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>

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代码在页面加载后运行（在用户键入函数中的任何数字之前）。您必须在函数内声明它，以便在用户单击按钮时获得输入值。

在Javascript

1 个答案: