Помогите пжл найти ошибку?

Question

Помогите пжл найти ошибку?

dutch Профи (558), на голосовании 11 месяцев назад

<!doctype html>
<html>
<head>
<title>JS Tester</title>
</head>
<body>
<div class="output"></div>
<input type="text" name="message" placeholder="Your Message">
<button class="btn1">Button 1</button>
<button class="btn2">Button 2</button>
<div>
<button class="btn3">Log</button>
</div>
<script>
const output = document.querySelector(".output");
const btn1 = document.querySelector(".btn1");
const btn2 = document.querySelector(".btn2");
const btn3 = document.querySelector(".btb3");
const myInput =document.querySelector("input[name='message']");
const log = [];
btn1.addEventListener("click", tracer);
btn2.addEventListener("click", tracer);
btn3.addEventListener("click", (e) =>{
console.log(log);
});
function tracer(e){
output.textContent=myInput.value;
const ev = e.target ;
console.dir(ev);
const temp={
message:myInput.value,
type:ev.type,
class:ev.className,
tag:ev.tagName
};
log.push(temp);
myInput.value="";
}

</script>
</body>
</html>
не знаю почему ошибка ?
Выполните следующие шаги.
1.
Используйте представленный HTML-код в качестве шаблона. Добавьте код JavaScript, чтобы выбрать каждый элемент страницы, включая div, поле ввода и элемент button. Поместите эти элементы в переменные.
2.
Создайте пустой массив log, который будет использоваться для отслеживания и фиксации всех событий.
3.
Напишите функцию, которая будет фиксировать сведения о событии в объекте, добавляя его в массив log. Используя свойство target, создайте объект и добавьте его в массив, где временно хранятся входное значение, тип события, имя класса и имя тега элемента target.
4.
В функции логирования событий получите содержимое поля ввода и присвойте это значение для textContent элемента div.
5.
Очистите содержимое элемента div после того, как запишете информацию в массив log.
6.
Добавьте к двум первым кнопкам прослушиватель событий, отправляющий объект события в созданную ранее функцию отслеживания.
7.
Добавьте прослушиватель событий третьей кнопке, выводящей содержимое журнала на экран.

Answer 1

Ошибка в коде JavaScript заключается в том, что в строке:

const btn3 = document.querySelector(".btb3");

неправильно указан класс кнопки. Вместо ".btb3" должно быть ".btn3". Исправьте эту ошибку и код будет работать правильно.

Answer 2

Есть несколько опечаток и ошибок в вашем коде JavaScript и HTML. Давайте исправим их:

Замените строку:

javascript
Copy code
const btn3 = document.querySelector(".btb3");
на

javascript
Copy code
const btn3 = document.querySelector(".btn3");
Исправьте тег head, добавив <meta charset="UTF-8"> для указания кодировки:

html
Copy code
<head>
<meta charset="UTF-8">
<title>JS Tester</title>
</head>
Убедитесь, что переменные и функции объявлены после соответствующих элементов в DOM, либо переместите блок <script> в конец тега body перед закрывающим </body>.

Замените

javascript
Copy code
const myInput =document.querySelector("input[name='message']");
на

javascript
Copy code
const myInput = document.querySelector("input[name='message']");
Убедитесь, что переменная log объявлена в глобальной области видимости, например, перед началом блока <script>.

Вот исправленный код:

html
Copy code
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>JS Tester</title>
</head>

<body>
<div class="output"></div>
<input type="text" name="message" placeholder="Your Message">
<button class="btn1">Button 1</button>
<button class="btn2">Button 2</button>
<div>
<button class="btn3">Log</button>
</div>

<script>
const output = document.querySelector(".output");
const btn1 = document.querySelector(".btn1");
const btn2 = document.querySelector(".btn2");
const btn3 = document.querySelector(".btn3");
const myInput = document.querySelector("input[name='message']");
const log = [];

btn1.addEventListener("click", tracer);
btn2.addEventListener("click", tracer);
btn3.addEventListener("click", () => {
console.log(log);
});

function tracer(e) {
output.textContent = myInput.value;
const ev = e.target ;
console.dir(ev);
const temp = {
message: myInput.value,
type: ev.type,
class: ev.className,
tag: ev.tagName
};
log.push(temp);
myInput.value = "";
}
</script>
</body>

</html>
Теперь код должен работать правильно.