Не удается прочитать свойства null (чтение «значение»)
Я пытаюсь получить значение поля ввода числа, но оно возвращает мне указанную ошибку.
HTML:
<label for = "number1">Enter the First number :</label><input type = "number" value = "0" id = "fornum1">
JavaScript:
var num1 = document.getElementById("fornum1").value;
Весь смысл веб-сайта заключается в создании базового калькулятора, который использует кнопки для отображения выходных данных в поле ввода.
var num1;
var num2;
var answer;
num1 = document.getElementById("fornum1").value;
num2 = document.getElementById("fornum2").value;
console.info(num1)
function addition() {
answer = num1 + num2;
document.getElementById("sum").value = answer;
}
function subtraction() {
answer = num1 - num2;
document.getElementById("minus").value = answer;
}
function multiplication() {
answer = num1 * num2;
document.getElementById("product").value = answer;
}
function division() {
answer = num1 / num2;
document.getElementById("divs").value = answer;
}#div1 {
height: 300px;
width: 500px;
background-color: plum;
margin: auto;
padding: 5%;
}
body {
font-family: Courier;
}
label {
width: 300px;
display: inline-block;
}
#div2 input {
width: 120px;
}<script src = "myscripts.js"></script>
<div id = "div1">
<p style = "text-align: center;">FOUR BASIC OPERATIONS</p>
<label for = "number1">Enter the First number :</label>
<input type = "number" value = "0" id = "fornum1">
<br><br>
<label for = "number2">Enter the Second number:</label>
<input type = "number" value = "0" id = "fornum2">
<br><br><br><br>
<div align = "center" id = "div2">
<button type = "button" onclick = "addition()">Add</button>
<input type = "text" id = "sum" readonly>
<button type = "button">Subtraction </button>
<input type = "text" id = "minus" onclick = "subtraction()" readonly>
<br><br><br>
<button type = "button">Multiplication</button>
<input type = "text" id = "product" onclick = "multiplication()" readonly>
<button type = "button">Division</button>
<input type = "text" id = "divs" onclick = "division()" readonly>
</div>
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Прежде всего, как предложил @mplungjan в комментариях, переместите script:src после тега </body>. Затем вы объявляете num1 и num2 в начале скрипта, что означает, что если значения ввода изменятся, программа по-прежнему будет иметь num1 и num2 равными 0. Итак, все, что вам нужно сделать, это при нажатии кнопки проверить значения ввода. снова для разнообразия. Наконец, проверка входных значений возвращает строку, а не число, как хотелось бы в калькуляторе. Итак, все, что вам нужно сделать, это преобразовать строку в число, используя ParseInt.
var num1;
var num2;
var answer;
num1 = document.getElementById("fornum1").value;
num2 = document.getElementById("fornum2").value;
function addition() {
num1 = document.getElementById("fornum1").value;
num2 = document.getElementById("fornum2").value;
num1 = parseInt(num1)
num2 = parseInt(num2)
answer = num1 + num2;
document.getElementById("sum").value = answer;
}
function subtraction() {
num1 = document.getElementById("fornum1").value;
num2 = document.getElementById("fornum2").value;
num1 = parseInt(num1)
num2 = parseInt(num2)
answer = num1 - num2;
document.getElementById("minus").value = answer;
}
function multiplication() {
num1 = document.getElementById("fornum1").value;
num2 = document.getElementById("fornum2").value;
num1 = parseInt(num1)
num2 = parseInt(num2)
answer = num1 * num2;
document.getElementById("product").value = answer;
}
function division() {
num1 = document.getElementById("fornum1").value;
num2 = document.getElementById("fornum2").value;
num1 = parseInt(num1)
num2 = parseInt(num2)
answer = num1 / num2;
document.getElementById("divs").value = answer;
}<!DOCTYPE html>
<html>
<head>
<title>Four Basic Operators</title>
<style>
#div1 {
height: 300px;
width: 500px;
background-color: plum;
margin: auto;
padding: 5%;
}
body {
font-family: Courier;
}
label {
width: 300px;
display: inline-block;
}
#div2 input {
width: 120px;
}
</style>
</head>
<body>
<div id = "div1">
<p style = "text-align: center;">FOUR BASIC OPERATIONS</p>
<label for = "number1">Enter the First number :</label>
<input type = "number" value = "0" id = "fornum1">
<br><br>
<label for = "number2">Enter the Second number:</label>
<input type = "number" value = "0" id = "fornum2">
<br><br><br><br>
<div align = "center" id = "div2">
<button type = "button" onclick = "addition()">Add</button>
<input type = "text" id = "sum" readonly>
<button type = "button" >Subtraction </button>
<input type = "text" id = "minus" onclick = "subtraction()" readonly>
<br><br><br>
<button type = "button">Multiplication</button>
<input type = "text" id = "product" onclick = "multiplication()" readonly>
<button type = "button">Division</button>
<input type = "text" id = "divs" onclick = "division()" readonly>
</div>
</div>
</body>
<script src = "script.js"></script>
</html>это работает, я не знал о script я думал, что это работает так же с связыванием файлов CSS.
TLDR:
<script defer src = "myscripts.js" defer/>
или
window.addEventListener("DOMContentLoaded", () => {/\*code here\*/}
Когда ваш браузер пытается разобрать HTML-код, который вы написали, он читает его сверху вниз.
Первое, что он читает, это ваш тег скрипта. Таким образом, ваш браузер загружает скрипт и сразу же запускает его. Затем он продолжает анализировать остальную часть файла. Но поскольку ваш скрипт запускается сразу, ваши элементы ввода еще не загружены.
Есть 2 хороших решения этой проблемы и 1 плохое:
Решение 1:
Добавьте атрибут defer в тег script. Тег defer скажет вашему браузеру не блокировать синтаксический анализ вашего html.
<script src = "myscripts.js" defer></script>
больше документации по тегу defer здесь
Решение 2:
Вместо того, чтобы запускать ваш скрипт сразу, создайте ваш скрипт для прослушивания, когда страница будет загружена, и пусть слушатель вызовет ваш скрипт
window.addEventListener("DOMContentLoaded", () => {
let value = document.getElementById("fornum1").value;
console.info(value);
}
краткое примечание для поддержки устаревших браузеров:
вы также можете установить свойство document.onload для анонимной функции, но если вы это сделаете, вы должны сначала проверить, определена ли она уже, и обязательно вызвать существующую функцию, если она уже существует после вызова вашей функции. Избегайте этого, потому что это плохая практика.
Решение 3: (плохое)
Если по какой-то причине вы не хотите использовать эфирный метод, вы всегда можете изменить порядок своих тегов, чтобы тег script был в конце вашего документа. Однако вам следует избегать этого, потому что ваши теги script обычно должны быть в <head> вашего документа.
В конце концов, вы должны попробовать и использовать вариант 1, так как он наиболее хорошо содержится и позволяет вашему коду существовать только как ваш код без сахара, чтобы он хорошо работал с браузером. Он также запускается до того, как запускается событие загрузки страницы, поэтому, если по какой-то причине у вас было что-то еще, что сработало при загрузке страницы, этот код запустился бы до этого.
Вам нужно переместить скрипт перед тегом
</body>или обернуть код вwindow.addEventListener("DOMContentLoaded",function() { .... })