Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Ошибка в вызове функции (https://javascript.ru/forum/misc/81672-oshibka-v-vyzove-funkcii.html)

mateorich 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 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>

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

рони 11.01.2021 12:05
Цитата:
Сообщение от Vlasenko Fedor
в примере ТС функция clean не определена в
<button onclick="clean()">Clean</button>
так как инициализация идет уже после в коде
можно нерабочий пример?

рони 11.01.2021 12:08
Цитата:
Сообщение от mateorich
TypeError: Cannot set property 'value' of null. Не пойму в чем ошибка.
элемента id="num1" или id="num2" нет на момент работы функции.

Vlasenko Fedor 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
Все работает отлично!

рони 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>

рони 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 11.01.2021 12:55
Vlasenko Fedor,
Все дело в строке 11


Часовой пояс GMT +3, время: 15:42.