Форум

mateorich · #1 (**permalink**) 10.01.2021, 22:43

Всем привет у меня есть два инпута, куда я ввожу числа. Хочу добавить кнопку по нажатию на которую эти поля будут очищаться, вроде бы все написал правильно, но функция не отрабатывает и выдает следующую ошибку: TypeError: Cannot set property 'value' of null. Не пойму в чем ошибка.

<p>Первое число: <input type="text" id="num1"></p>
<p>Второе число: <input type="text" id="num2"></p>
<button onclick="clean()">Clean</button>

function clean(){
    document.getElementById("num1").value = "";
    document.getElementById("num2").value = "";
}

Vlasenko Fedor · #2 (**permalink**) 11.01.2021, 01:43

причина ошибки описана https://learn.javascript.ru/onload-ondomcontentloaded
пример решения

<div id="trackedBlock">
<p>Первое число: <input type="text" id="num1"></p>
<p>Второе число: <input type="text" id="num2"></p>
</div>

<button id="clearBlock">Clean</button>
<script>
 document.addEventListener("DOMContentLoaded", () => {
   clearBlock.addEventListener("click", () => {
		[...trackedBlock.querySelectorAll('input')].forEach(el=>el.value="")
   });
 });

</script>

рони · #3 (**permalink**) 11.01.2021, 08:19

mateorich,
Vlasenko Fedor,

что не так?

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
function clean(){
    document.getElementById("num1").value = "";
    document.getElementById("num2").value = "";
}
  </script>
</head>
<body>
<p>Первое число: <input type="text" id="num1"></p>
<p>Второе число: <input type="text" id="num2"></p>
<button onclick="clean()">Clean</button>
</body>
</html>

Vlasenko Fedor · #4 (**permalink**) 11.01.2021, 11:51

рони, специально ведь дал ссылку на DOMContentLoaded
в своем примере вы объявили функцию clean до ее использования
в примере ТС функция clean не определена в
<button onclick="clean()">Clean</button>
так как инициализация идет уже после в коде

рони · #5 (**permalink**) 11.01.2021, 12:05

Сообщение от Vlasenko Fedor

в примере ТС функция clean не определена в
<button onclick="clean()">Clean</button>
так как инициализация идет уже после в коде

можно нерабочий пример?

рони · #6 (**permalink**) 11.01.2021, 12:08

Сообщение от mateorich

TypeError: Cannot set property 'value' of null. Не пойму в чем ошибка.

элемента id="num1" или id="num2" нет на момент работы функции.

Vlasenko Fedor · #7 (**permalink**) 11.01.2021, 12:13

<p>Первое число: <input type="text" id="num1"></p>
<p>Второе число: <input type="text" id="num2"></p>
<button onclick="clean()">Clean</button>

<script>
	function clean(){

	    document.getElementById("num1").value = "";
	    document.getElementById("num2").value = "";
	}
</script>

рони не элементов, а самой функции нет
<button onclick="console.log(clean),clean()">Clean</button>
~~выведет ReferenceError: clean is not defined~~
Все работает отлично!

рони · #8 (**permalink**) 11.01.2021, 12:33

Vlasenko Fedor,
почему у меня всё работает?

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>
<body>
<p>Первое число: <input type="text" id="num1"></p>
<p>Второе число: <input type="text" id="num2"></p>
<button onclick="clean()">Clean</button>
  <script>
function clean(){
    document.getElementById("num1").value = "";
    document.getElementById("num2").value = "";
}
  </script>

</body>
</html>

рони · #9 (**permalink**) 11.01.2021, 12:35

вариант с ошибкой 'value' of null, строка 9, id не дописано.

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>
<body>
<p>Первое число: <input type="text" id="num"></p>
<p>Второе число: <input type="text" id="num2"></p>
<button onclick="clean()">Clean</button>
  <script>
function clean(){
    document.getElementById("num1").value = "";
    document.getElementById("num2").value = "";
}
  </script>

</body>
</html>

voraa · #10 (**permalink**) 11.01.2021, 12:55

Vlasenko Fedor,
Все дело в строке 11

Форум

Справочник

Discord чат

Курсы javascript