document.getElementById ('id') является нулевой ошибкой JavaScript - PullRequest
Новая
       5

document.getElementById ('id') является нулевой ошибкой JavaScript

2 голосов
/ 12 октября 2010

По какой-то причине я получаю ошибку document.getElementById('id') is null JS в строке 7 со следующей разметкой и скриптом: 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quadratic Root Finder</title>
<script>
document.getElementById('calculate').onclick = function calculateQuad()
{
    var inputa = document.getElementById('variablea').value;
    var inputb = document.getElementById('variableb').value;
    var inputc = document.getElementById('variablec').value;

    root = Math.pow(inputb,2) - 4 * inputa * inputc;
    root1 = (-inputb + Math.sqrt(root))/2*inputa
    root2 = (-inputb + Math.sqrt(root))/2*inputa 

    document.getElementById('root1').value = root1;
    document.getElementById('root2').value = root2;
    if(root<'0')
    {
        alert('This equation has no real solution.')
    }
    else {
        if(root=='0')
        {
            document.getElementById('root1').value = root1
            document.getElementById('root2').value = 'No Second Answer'
        }
        else {
            document.getElementById('root1').value = root1
            document.getElementById('root2').value = root1
            }
        }
};
document.getElementById('erase').onlick = this.form.reset();
</script>
<style>
#container
{
    text-align: center;
}
</style>
</head>

<body>
<div id="container">
<h1>Quadratic Root Finder!</h1>
<form id="form1">
    a:<input id="variablea" value="" type="text">
    <br/>
    b:<input id="variableb" value="" type="text">
    <br />
    c:<input id="variablec" value="" type="text">
    <br />
    <input id="calculate" value="Calculate!" type="button">
    <input id="erase" value="Clear" type="button">
    <br />
    <br />
    Roots:
    <br />
    <input id="root1" type="text" readonly>
    <br />
    <input id="root2" type="text" readonly>
</form>
</div>
</body>
</html>

В чем тут реальная проблема?

Ответы [ 6 ]

6 голосов
/ 12 октября 2010

Это действительно null. Ваш элемент еще не существует на странице.

Или:

  • Переместите блок <script> ниже кода
  • Добавить событие window.onload.
2 голосов
/ 12 октября 2010

В качестве альтернативы: window.onload = function(){} также работает

2 голосов
/ 12 октября 2010

Если вы не хотите включать jQuery, то document.ready = function () {} тоже будет хорошо работать.

0 голосов
/ 10 ноября 2016
  1. с использованием windows.onload
  2. добавить сценарий файла ссылки или сценарий ниже "тега конца тела"
0 голосов
/ 12 октября 2010

Вы можете исправить это, переместив скрипт в конец тела, или попробуйте использовать window.onload, или window.addEventListenner
Отметьте http://v3.thewatchmakerproject.com/journal/168/javascript-the-dom-addeventlistener-and-attachevent
и http://javascript.about.com/library/blonload.htm

0 голосов
/ 12 октября 2010

В точке, в которой фактически выполняется javascript, нет элемента с идентификатором 'Calculate'.Вы должны убедиться, что ваш JavaScript запускается после того, как необходимые элементы были созданы.Мой совет - использовать общую структуру javascript, такую ​​как jquery.Затем вы просто прикрепите свой скрипт для запуска на DOM Ready: 

$(document).ready(function() {
    // Handler for .ready() called.
});
...