Hulu Hulu - 26 days ago 8
HTML Question

My output is not displaying

So in HTML file I am taking in 6 numbers which will be used to determine the derivative for a user input amount of time. And this is the code that I have for the 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>


And in my js file I have

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;
}


I have everything set. When the user enters all the numbers the first to the fifth derivative will be calculated and stored into an array. After all the calculations are done it will then insert all the outputs into a table where it will be displayed in a table format. I used an alert to test weather or not my function was being called, and it was not. Any help would be appreciated.

Answer

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>