2016-11-11 3 views
-2

Итак, в 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; 
} 

Я все настройки. Когда пользователь вводит все числа, первая и пятая производные будут вычисляться и сохраняться в массиве. После того, как все вычисления будут выполнены, он будет вставлять все выходы в таблицу, где она будет отображаться в формате таблицы. Я использовал предупреждение для проверки погоды или не вызывал мою функцию, и это не так. Любая помощь будет оценена по достоинству.

+1

опечатки: когда definig вару MYTABLE изменить двойные кавычки которые заключают в ширину единственную цитату «var myTable =»

";' – GiuServ

+0

Я изменил часть myTable и для rowInput, это будет просто rowInput.length или rowInput.length() ? – Hulu

+0

@RickBronger Я не думаю, что 'rowInput' - это массив, поэтому нет необходимости в'.length' Я считаю, что 'rowInput' - это значение ввода, которое должно иметь значение' rowInput = parseInt (document.getElementById ("rows"). value); 'для синтаксического анализа значения только как целое. – NewToJS

ответ

-1

Первичное изменение, как пишет в комментариях в этом вопросе, чтобы изменить определение таблицы переменной

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

Coding на фрагменте кода я также должен был изменить еще одну строку, но я не смог найдите его снова, глядя на вопрос, так что я думаю, что это была проблема с копированием/вставкой.

Чем было все, работая сама.

Извините за задержку с добавлением деталей, но меня здесь не было.

редактировать 2 Вторая проблема заключается в определении в HTML из <input type="text" name="fourthNum" 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>

+1

Меньше всего вы можете сделать, это объяснить сделанные вами изменения и дать основания для того, почему ... Не каждый хочет исправления исходного кода, некоторые хотели бы знать, почему он не функционировал так, как предполагалось узнайте от этой ошибки для будущей справки. – NewToJS

+0

Я вижу, что это работает? Но как? что вы изменили? – Hulu

+0

@Hulu Я думаю, что единственным изменением является «var myTable =»

NewToJS

0

Мало что здесь

  1. Никогда не смешивать разметку с JavaScript
  2. Попробуйте связывание события в яваскрипте конца
  3. строке записи DonT как "" использование .Make из createElement и insertRows
  4. Break down yo ур код в нескольких методах/подпрограмм это diffilcut понять, если она занимает более 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>

Надеется, что это помогает

+1

Я буду помнить, что вы сказали в виду. Обычно я программирую на языке C++ или java, и я пытаюсь создать веб-разработку. Это не так просто, как кажется. Цените свой вклад, спасибо. – Hulu

Смежные вопросы