Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.01.2021, 22:43
Интересующийся
Отправить личное сообщение для mateorich Посмотреть профиль Найти все сообщения от mateorich
 
Регистрация: 21.11.2020
Сообщений: 14

Ошибка в вызове функции
Всем привет у меня есть два инпута, куда я ввожу числа. Хочу добавить кнопку по нажатию на которую эти поля будут очищаться, вроде бы все написал правильно, но функция не отрабатывает и выдает следующую ошибку: 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 = "";
}
Ответить с цитированием
  #2 (permalink)  
Старый 11.01.2021, 01:43
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

причина ошибки описана 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>

Последний раз редактировалось Vlasenko Fedor, 11.01.2021 в 01:46.
Ответить с цитированием
  #3 (permalink)  
Старый 11.01.2021, 08:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #4 (permalink)  
Старый 11.01.2021, 11:51
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

рони, специально ведь дал ссылку на DOMContentLoaded
в своем примере вы объявили функцию clean до ее использования
в примере ТС функция clean не определена в
<button onclick="clean()">Clean</button>
так как инициализация идет уже после в коде
Ответить с цитированием
  #5 (permalink)  
Старый 11.01.2021, 12:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Vlasenko Fedor
в примере ТС функция clean не определена в
<button onclick="clean()">Clean</button>
так как инициализация идет уже после в коде
можно нерабочий пример?
Ответить с цитированием
  #6 (permalink)  
Старый 11.01.2021, 12:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от mateorich
TypeError: Cannot set property 'value' of null. Не пойму в чем ошибка.
элемента id="num1" или id="num2" нет на момент работы функции.
Ответить с цитированием
  #7 (permalink)  
Старый 11.01.2021, 12:13
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

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

Последний раз редактировалось Vlasenko Fedor, 11.01.2021 в 12:58. Причина: Слепой стал
Ответить с цитированием
  #8 (permalink)  
Старый 11.01.2021, 12:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

вариант с ошибкой '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>
Ответить с цитированием
  #10 (permalink)  
Старый 11.01.2021, 12:55
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Vlasenko Fedor,
Все дело в строке 11
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ошибка Uncaught TypeError: Cannot read property '1' of null? orb jQuery 12 18.11.2020 03:12
Скобки при вызове функции karden Events/DOM/Window 12 16.01.2016 20:02
ошибка при вызове из консоли глобального модуля express в node.js в windows 8.1 jazznet AJAX и COMET 1 16.06.2015 10:30
Подскажите, как работает простой код (замыкание функции)? Dotod Общие вопросы Javascript 5 02.12.2009 04:03
То-ли лыжи не едут, толи... возможно ошибка в коде. AzriMan Общие вопросы Javascript 19 18.05.2009 16:07