Ошибка при чтении ввода в Javascript

Я пытаюсь сделать стол с помощью java-цикла, и я думаю, что он работает хорошо. Но у меня были другие ошибки при чтении ввода. Когда я набираю номер и нажимаю кнопку, он должен читать информацию из числа, но он продолжает делать вывод «null» для части h2 и «0» для внутренней части ячейки. Я думаю, что этот код генерирует нуль, потому что он не может прочитать номер из ввода. Поэтому я хочу знать, в чем проблема.Ошибка при чтении ввода в Javascript

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<title>Multiplication table</title> 

<link rel="stylesheet" href="styles.css" /> 
<script src="Generate.js"></script> 

</head> 

<body> 
<header> 
<h1>Multiplication Table</h1> 
</header> 

<article> 
    <form> 
     <fieldset> 
     Enter a number: <input type="number" id="number" /> 
     </fieldset> 
     <fieldset> 
     <button type="button" id="button">Generate Times Table</button> 
     </fieldset> 
    </form> 
    <center> 
    <h2 id="name"></h2> 
    <div id="results"> 
    <script> 
    var submitButton = document.getElementById("button"); 
    if (submitButton.addEventListener) { 
    submitButton.addEventListener("click", generatetable, false); 
    window.addEventListener("load", function() { 
     document.getElementById('number').innerHTML = ""; 
    }, false); 
    } 
    else if (submitButton.attachEvent) { 
    submitButton.attachEvent("onclick", generatetable); 
    window.attachEvent("onload", function() { 
     document.getElementById('number').innerHTML = ""; 
       }); 
    } 
    </script>  
</div> 
</center> 
</article> 
</body> 
</html>

и вот мой Generate.js

var input = document.getElementById("number"); 
var table = document.createElement('table'), tr, td, row, cell; 
var times = 0; 

function generatetable() { 
    document.getElementById("name").innerHTML = input + " Times Table"; 
    for (row = 0; row < 10; row++) { 
     tr = document.createElement('tr'); 
      for (cell = 1; cell <= 3; cell++) { 
       times++; 
       var result = input * times; 
       td = document.createElement('td'); 
       tr.appendChild(td); 
       td.innerHTML = result; 
       } 
    table.appendChild(tr); 
    } 
    document.getElementById('results').appendChild(table); 
}

источник

2017-02-08 Momo

Java или Javascript? Измените название! – TricksfortheWeb

Собственно, удалите его из названия. Теги принадлежат в списке тегов, а не в заголовке. – Xufox

@TricksfortheWeb Упс! ty – Momo

Существовали много проблем с этим, но я получил это работает.

var submitButton = document.getElementById("button"); 
 
if (submitButton.addEventListener) { 
 
    submitButton.addEventListener("click", generatetable, false); 
 
    window.addEventListener("load", function() { 
 
    document.getElementById('number').value = ""; 
 
    }, false); 
 
} else if (submitButton.attachEvent) { 
 
    submitButton.attachEvent("onclick", generatetable); 
 
    window.attachEvent("onload", function() { 
 
    document.getElementById('number').value = ""; 
 
    }); 
 
} 
 

 
function generatetable() { 
 
    var input = Number(document.getElementById("number").value); 
 
    var table = document.createElement('table'), 
 
    tr, td, row, cell; 
 
    var times = 0; 
 
    document.getElementById("name").innerHTML = input + " Times Table"; 
 
    for (row = 0; row < 10; row++) { 
 
    tr = document.createElement('tr'); 
 
    for (cell = 1; cell <= 3; cell++) { 
 
     times++; 
 
     var result = input * times; 
 
     td = document.createElement('td'); 
 
     td.innerHTML = result; 
 
     tr.appendChild(td); 
 
    } 
 
    table.appendChild(tr); 
 
    } 
 
    document.getElementById('results').appendChild(table); 
 
}

<header> 
 
    <h1>Multiplication Table</h1> 
 
</header> 
 

 
<article> 
 
    <form> 
 
    <fieldset> 
 
     Enter a number: 
 
     <input type="number" id="number" /> 
 
    </fieldset> 
 
    <fieldset> 
 
     <button type="button" id="button">Generate Times Table</button> 
 
    </fieldset> 
 
    </form> 
 
    <center> 
 
    <h2 id="name"></h2> 
 
    <div id="results"></div> 
 
    </center> 
 
</article>

В дополнение к получению значения, то необходимо также, чтобы переместить переменную input внутри функции, в противном случае она будет всегда оставаться в своем первоначальном значении, которое было 0.

источник

2017-02-08 20:52:05 TricksfortheWeb

это работает !. Я изучу этот код, чтобы понять, как он работает. Большое вам спасибо ~ _ ~ – Momo

Добро пожаловать. Вы можете принять ответ, нажав галочку. – TricksfortheWeb

Ошибка при чтении ввода в Javascript

ответ

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