Блог

Главная - Вопросы по программированию - Я получил сообщение об ошибке, когда я нажал на кнопку

Я получил сообщение об ошибке, когда я нажал на кнопку

#javascript #html

#javascript #HTML

Вопрос:

У меня есть этот пример кода, и кнопка не кликабельна, я получил эту ошибку, когда нажал на нее

также, когда я открываю исходный код, я вижу две кнопки почему?

Ошибка неперехваченной ссылки: addText не определен onclick file:///C:/Users/Dany/Desktop/javatest/index.html:1

 <body data-new-gr-c-s-check-loaded="8.867.0">
<div id="button"><button onclick="addText()">Add Text</button><button></button>
</div>
<div id="printData"></div>

</body>

Теперь это мой код, и, пожалуйста, обратите внимание, что мне нужно, чтобы кнопка была внутри js, а не в html, и спасибо

 window.addEventListener("load", function() {
    let btn = '<button onclick="addText()">Add Text<button/>';
    let data = document.getElementById("printData");
    let info = document.getElementById("button");
    info.innerHTML = btn;
    
    
    function addText(){
        data.innerHTML = "Hello World!";
        
    }
}); 
 <!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <link href="css/css.css" rel="stylesheet">
  <script src="js/js.js">
  </script>
</head>
<body>
<div id="button"></div>
<div id="printData"></div>
</body>
</html>

Комментарии:

1. если вы добавляете прослушиватель событий с использованием атрибута, функция должна быть глобальной, а ваша — нет

2. addText определяется только в пределах области прослушивателя событий, что делает его неопределенным, когда он вызывается из события click.

3. Тогда как я могу это исправить?

Ответ №1:

Попробуйте что-то вроде этого

 window.addEventListener("load", function() {
    let btn = '<button>Add Text</button>';
    let data = document.getElementById("printData");
    let info = document.getElementById("button");
    info.innerHTML = btn;
    
    info.addEventListener("click", () => {
        data.innerHTML = "Hello World!";
        
    })
    
});

Комментарии:

1. Спасибо, братан, после 3 недель этой проблемы, и она была решена :), есть идеи, почему при открытии исходного кода html появляются повторяющиеся входные данные?

2. У вас есть 2 <button> элемента, потому что вы неправильно закрываете первый. Правильный закрывающий тег будет выглядеть так: </button> , с косой чертой в начале. Ваш браузер думает, что вы хотели добавить 2, и соответствующим образом исправляет ваш HTML.

3. @AbderrahimSoubai-Elidrisi , по какой-либо конкретной причине вы назвали свою функцию, которая по сути является функцией-выражением?

4. Вы имеете в виду лямбда-выражение. Анонимная функция изменяет контекст и может создавать замыкания, тогда как лямбды (или функции со стрелками) не могут этого сделать. Довольно полезная функция, если вы задумаетесь об этом.

5. Конечно, вы можете называть это как угодно. Но, пожалуйста, знайте, это просто неправильно.

Ответ №2:

функция должна быть вне прослушивателя событий

 window.addEventListener("load", function() {
    let btn = '<button onclick="addText()">Add Text<button</button>';
    let info = document.getElementById("button");
    info.innerHTML = btn;
});

function addText(){
    let data = document.getElementById("printData");
    data.innerHTML = "Hello World!";
} 
 <div id="button"></div>
<div id="printData"></div>
Метки: ,