我的输出没有显示答案

【问题标题】：My output is not displaying我的输出没有显示
【发布时间】：2016-11-11 14:29:41
【问题描述】：

所以在 HTML 文件中，我输入了 6 个数字，这些数字将用于确定用户输入时间量的导数。这是我的 HTML 代码

<body>
    <h1>Enter your numbers:</h1>
    <table>
        <tr>
            <h4>Enter your first number:</h4><input type="text" name="firstNum" id="first">
            <h4>Enter your second number:</h4><input type="text" name="secondNum" id="second">
            <h4>Enter your third number:</h4><input type="text" name="thirdNum" id="third">
            <h4>Enter your fourth number:</h4><input type="text" name="fourthNum" id "fourth">
            <h4>Enter your fifth number:</h4><input type="text" name="fifthNum" id="fifth">
            <h4>Enter your sixth number:</h4><input type="text" name="sixthNum" id="sixth">
            <h4>Enter the number of rows:</h4><input type="text" name="rowsNum" id="rows">
        </tr>
    </table>

    <table style="width:100%">
        <tr>
            <th>y</th>
            <th>&#9651y</th>
            <th>&#9651<sup>2</sup>y</th>
            <th>&#9651<sup>3</sup>y</th>
            <th>&#9651<sup>4</sup>y</th>
        </tr>
    </table>
    <button type="button" onclick="submitForCalc()">Submit</button>
    <div id="tablePrint"> </div>

    <script src="babbCore.js"> </script>
</body>

在我的 js 文件中，我有

function submitForCalc()
 {
/*
    If no inputs are given the defaults will be 0
*/
var firstInput = 0;
var secondInput =0;
var thirdInput =0;
var fourthInput =0;
var fifthInput =0;
var sixthInput =0;
var rowInput = 1;

/*
    Stores the user inputs into the values
*/
firstInput = document.getElementById("first").value; 
secondInput = document.getElementById("second").value;
thirdInput = document.getElementById("third").value;
fourthInput = document.getElementById("fourth").value;
fifthInput = document.getElementById("fifth").value;
sixthInput = document.getElementById("sixth").value;
rowInput = document.getElementById("rows").value;

/*
    stores the answer for each derivative into an array
*/
var zeroDir = new Array();
var firstDir = new Array();
var secondDir = new Array();
var thirdDir = new Array();
var fourthDir = new Array();
var fifthDir = new Array();

var myTable = "<table style="width:100%><tr>";  //the table of outputs

//This is where the calculations are done
var i =0;
for (i; i<rowInput; i++)
{
    zeroDir[i] = (firstInput*Math.pow(i, 5))+(secondInput*Math.pow(i, 4))+(thirdInput*Math.pow(i, 3))+(fourthInput*Math.pow(i, 2))+(fifthInput*Math.pow(i, 1))+sixthInput;
    firstDir[i] = ((5*firstInput)*Math.pow(i, 4))+((4*secondInput)*Math.pow(i, 3))+((3*thirdInput)*Math.pow(i, 2))+((2*fourthInput)*Math.pow(i, 1))+fifthInput;
    secondDir[i] = ((20*firstInput)*Math.pow(i, 3))+((12*secondInput)*Math.pow(i, 2))+((6*thirdInput)*Math.pow(i, 1))+(2*fourthInput);
    thirdDir[i] = ((60*firstInput)*Math.pow(i, 2))+((24*secondInput)*Math.pow(i, 1))+(6*thirdInput);
    fourthDir[i] = ((120*firstInput)*Math.pow(i, 1))+(24*secondInput);
    fifthDir[i] = (120*firstInput);
}

//This is where the output is created
for (var j=0; j<i; j++) 
{
    myTable += "<th>"+zeroDir[j] + "</th>"+ "<th>"+firstDir[j] +"</th>"+ "<th>"+secondDir[j] + "</th>"+ "<th>"+thirdDir[j] + "</th>"+ "<th>" + fourthDir[j] + "</th>" + "<th>" +fifthDir[j]+ "</th>";
} 
myTable+="</tr></table>";
document.getElementById('tablePrint').innerHTML = myTable;
}

我已经准备好了。当用户输入所有数字时，将计算一阶到五阶导数并将其存储到一个数组中。完成所有计算后，它将所有输出插入到表格中，并以表格格式显示。我使用警报来测试天气是否正在调用我的函数，但事实并非如此。任何帮助将不胜感激。

【问题讨论】：

错字：当定义var myTable时，将包含宽度的双引号更改为单引号var myTable = "<table style='width:100%'><tr>";
我更改了 myTable 部分，对于 rowInput，它只是 rowInput.length 还是 rowInput.length() ？
@RickBronger 我不认为rowInput 是一个数组，所以不需要.length 我相信rowInput 是输入的值，应该有rowInput = parseInt(document.getElementById("rows").value); 来解析值仅作为整数。

标签： javascript html arrays html-table

【解决方案1】：

这里的东西很少

切勿将您的标记与 javascript 混合使用
尝试在 javascript 结束时绑定事件
不要将字符串写成 ""。使用 createElement 和 insertRows
将您的代码分解为多个方法/子例程，如果超过 10 行则难以理解

window.onload = function() {
  var submit = document.getElementById('submit');
  submit.addEventListener('click', submitForCalc);
}

function submitForCalc() {

  var firstInput = 0;
  var secondInput = 0;
  var thirdInput = 0;
  var fourthInput = 0;
  var fifthInput = 0;
  var sixthInput = 0;
  var rowInput = 1;

  firstInput = document.getElementById("first").value;

  secondInput = document.getElementById("second").value;

  thirdInput = document.getElementById("third").value;

  var fourthInput = document.getElementById("fourth").value;

  fifthInput = document.getElementById("fifth").value;

  sixthInput = document.getElementById("sixth").value;

  rowInput = document.getElementById("rows").value;


  /*
      stores the answer for each derivative into an array
  */
  var zeroDir = new Array();
  var firstDir = new Array();
  var secondDir = new Array();
  var thirdDir = new Array();
  var fourthDir = new Array();
  var fifthDir = new Array();

  var myTable = document.createElement('table');
  myTable.style.width = "100%";
  myTable.style.border = "1";
  var i = 0;
  for (var i = 0; i < rowInput; i++) {
    zeroDir[i] = (firstInput * Math.pow(i, 5)) + (secondInput * Math.pow(i, 4)) + (thirdInput * Math.pow(i, 3)) + (fourthInput * Math.pow(i, 2)) + (fifthInput * Math.pow(i, 1)) + sixthInput;
    firstDir[i] = ((5 * firstInput) * Math.pow(i, 4)) + ((4 * secondInput) * Math.pow(i, 3)) + ((3 * thirdInput) * Math.pow(i, 2)) + ((2 * fourthInput) * Math.pow(i, 1)) + fifthInput;
    secondDir[i] = ((20 * firstInput) * Math.pow(i, 3)) + ((12 * secondInput) * Math.pow(i, 2)) + ((6 * thirdInput) * Math.pow(i, 1)) + (2 * fourthInput);
    thirdDir[i] = ((60 * firstInput) * Math.pow(i, 2)) + ((24 * secondInput) * Math.pow(i, 1)) + (6 * thirdInput);
    fourthDir[i] = ((120 * firstInput) * Math.pow(i, 1)) + (24 * secondInput);
    fifthDir[i] = (120 * firstInput);


  }
  var header = myTable.createTHead();
  var row = header.insertRow(0);
  //This is where the output is created
  for (var j = 0; j < i; j++) {
    var thElement_1 = document.createElement('th');
    thElement_1.innerHTML = zeroDir[j];

    row.appendChild(thElement_1);

    var thElement_2 = document.createElement('th');
    thElement_2.innerHTML = firstDir[j];

    row.appendChild(thElement_2);

    var thElement_3 = document.createElement('th');
    thElement_3.innerHTML = secondDir[j];

    row.appendChild(thElement_3);
    var thElement_4 = document.createElement('th');
    thElement_4.innerHTML = thirdDir[j];

    row.appendChild(thElement_4);
    var thElement_5 = document.createElement('th');
    thElement_5.innerHTML = fourthDir[j];

    row.appendChild(thElement_5);

  }

  var printTable = document.getElementById('tablePrint');
  printTable.append(myTable);
}

 <h1>Enter your numbers:</h1>
<table>
  <tr>
    <h4>Enter your first number:</h4>
    <input type="text" name="firstNum" id="first">
    <h4>Enter your second number:</h4>
    <input type="text" name="secondNum" id="second">
    <h4>Enter your third number:</h4>
    <input type="text" name="thirdNum" id="third">
    <h4>Enter your fourth number:</h4>
    <input type="text" name="fourthNum" id="fourth">
    <h4>Enter your fifth number:</h4>
    <input type="text" name="fifthNum" id="fifth">
    <h4>Enter your sixth number:</h4>
    <input type="text" name="sixthNum" id="sixth">
    <h4>Enter the number of rows:</h4>
    <input type="text" name="rowsNum" id="rows">
  </tr>
</table>

<table style="width:100%">
  <tr>
    <th>y</th>
    <th>&#9651y</th>
    <th>&#9651<sup>2</sup>y</th>
    <th>&#9651<sup>3</sup>y</th>
    <th>&#9651<sup>4</sup>y</th>
  </tr>
</table>
<button type="button" id="submit" >Submit</button>
<div id="tablePrint"></div>

希望对你有帮助

【讨论】：

我会记住你所说的。我通常用 C++ 或 Java 编写代码，并且正在尝试一些 Web 开发。这并不像看起来那么容易。感谢您的意见，谢谢。

【解决方案2】：

正如问题评论中所写，主要更改是更改表变量的定义

 var myTable = "<table style='width:100%'><tr>";

在 sn-p 上编码我也不得不更改另一行，但我无法再次找到它查看问题，所以我猜这是复制/粘贴的问题。

一切都在自己工作。

抱歉延迟添加细节，但我不在。

编辑 2 第二个问题是<input type="text" name="fourthNum" id "fourth">的html中的定义。它缺少=，所以我放置了

在此更改之前出现的错误是“试图获取 null 的属性值”，因为在编辑之前当然不可能找到 ID 为 fourth 的元素。

function submitForCalc() {
  /*
      If no inputs are given the defaults will be 0
  */
  var firstInput = 0;
  var secondInput = 0;
  var thirdInput = 0;
  var fourthInput = 0;
  var fifthInput = 0;
  var sixthInput = 0;
  var rowInput = 1;

  /*
      Stores the user inputs into the values
  */
  firstInput = document.getElementById("first").value;
  secondInput = document.getElementById("second").value;
  thirdInput = document.getElementById("third").value;
  fourthInput = document.getElementById("fourth").value;
  fifthInput = document.getElementById("fifth").value;
  sixthInput = document.getElementById("sixth").value;
  rowInput = document.getElementById("rows").value;

  /*
      stores the answer for each derivative into an array
  */
  var zeroDir = new Array();
  var firstDir = new Array();
  var secondDir = new Array();
  var thirdDir = new Array();
  var fourthDir = new Array();
  var fifthDir = new Array();

  var myTable = "<table style='width:100%'><tr>"; //the table of outputs

  //This is where the calculations are done
  var i = 0;
  for (i; i < rowInput; i++) {
    zeroDir[i] = (firstInput * Math.pow(i, 5)) + (secondInput * Math.pow(i, 4)) + (thirdInput * Math.pow(i, 3)) + (fourthInput * Math.pow(i, 2)) + (fifthInput * Math.pow(i, 1)) + sixthInput;
    firstDir[i] = ((5 * firstInput) * Math.pow(i, 4)) + ((4 * secondInput) * Math.pow(i, 3)) + ((3 * thirdInput) * Math.pow(i, 2)) + ((2 * fourthInput) * Math.pow(i, 1)) + fifthInput;
    secondDir[i] = ((20 * firstInput) * Math.pow(i, 3)) + ((12 * secondInput) * Math.pow(i, 2)) + ((6 * thirdInput) * Math.pow(i, 1)) + (2 * fourthInput);
    thirdDir[i] = ((60 * firstInput) * Math.pow(i, 2)) + ((24 * secondInput) * Math.pow(i, 1)) + (6 * thirdInput);
    fourthDir[i] = ((120 * firstInput) * Math.pow(i, 1)) + (24 * secondInput);
    fifthDir[i] = (120 * firstInput);
  }

  //This is where the output is created
  for (var j = 0; j < i; j++) {
    myTable += "<th>" + zeroDir[j] + "</th>" + "<th>" + firstDir[j] + "</th>" + "<th>" + secondDir[j] + "</th>" + "<th>" + thirdDir[j] + "</th>" + "<th>" + fourthDir[j] + "</th>" + "<th>" + fifthDir[j] + "</th>";
  }
  myTable += "</tr></table>";
  document.getElementById('tablePrint').innerHTML = myTable;
}

<body>
  <h1>Enter your numbers:</h1>
  <table>
    <tr>
      <h4>Enter your first number:</h4>
      <input type="text" name="firstNum" id="first">
      <h4>Enter your second number:</h4>
      <input type="text" name="secondNum" id="second">
      <h4>Enter your third number:</h4>
      <input type="text" name="thirdNum" id="third">
      <h4>Enter your fourth number:</h4>
      <input type="text" name="fourthNum" id="fourth">
      <h4>Enter your fifth number:</h4>
      <input type="text" name="fifthNum" id="fifth">
      <h4>Enter your sixth number:</h4>
      <input type="text" name="sixthNum" id="sixth">
      <h4>Enter the number of rows:</h4>
      <input type="text" name="rowsNum" id="rows">
    </tr>
  </table>

  <table style="width:100%">
    <tr>
      <th>y</th>
      <th>&#9651y</th>
      <th>&#9651<sup>2</sup>y</th>
      <th>&#9651<sup>3</sup>y</th>
      <th>&#9651<sup>4</sup>y</th>
    </tr>
  </table>
  <button type="button" onclick="submitForCalc()">Submit</button>
  <div id="tablePrint"></div>

  <script src="babbCore.js">
  </script>
</body>

【讨论】：

您至少可以解释您所做的更改并说明原因...不是每个人都只想修复源代码，有些人想知道为什么它没有按预期运行从错误中吸取教训，以备将来参考。
@Hulu 我认为唯一的变化是var myTable = "<table style="width:100%><tr>"; 这个var myTable = "<table style='width:100%'><tr>"; 它使用单引号来阻止字符串从样式属性中中断。为什么 GiuServ 没有对此添加详细解释，这超出了我的理解。毫无疑问，只是那些放弃解决方案以获得标记但无法理解的人中的一个人喜欢理解问题并从中学习。
对不起，是的，我现在添加了细节，测试后我有点忙并保存了sn-p。我还发现了我要在答案中添加的另一个问题（这是id "fourth" 的定义）