我的输出没有显示

时间：2016-11-11 14:29:41

标签： javascript html arrays html-table

因此，在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;
}

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

2 个答案:

答案 0 :(得分：0)

这里很少有东西

  1. 永远不要将您的标记与javascript混合
  2. 在javascript end尝试绑定事件
  3. 不要将字符串写成＆＃34;＆＃34;。使用createElement和insertRows
  4. 将您的代码分解为多个方法/子程序，如果需要超过10行，则难以理解

    5. ＆＃13;
    ＆＃13; 
    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);
}
    ＆＃13; 
     <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    希望这有帮助

答案 1 :(得分：-1)

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

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

在代码片段上编码我也不得不改变另一条线，但我再也无法找到问题了，所以我想这是复制/粘贴的问题。

一切都在发挥作用。

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

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

在此更改之前获得的错误是“尝试获取null属性值”，因为在编辑之前无法找到id 第四的元素。

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>

相关问题
最新问题