Не могу заставить JavaScript изменить заголовок
Предполагается, что этот код запрашивает у пользователя ввод данных и возвращает неправильный или правильный ответ в зависимости от отправленной строки (правильный ответ — «Аконкагуа»). При запуске и отправке ни один из этих ответов не выводится на экран. Я новичок в JavaScript и HTML.
function wrong2()
{
document.querySelector('#2solution').innerHTML = "Incorrect.";
document.querySelector('#input').style.backgrounColor = 'red';
}
function right2()
{
document.querySelector('#2solution').innerHTML = "Correct!";
document.querySelector('#input').style.backgrounColor = 'green';
}
a = "Aconcagua";
document.querySelector('#form').addEventListener('submit', function(event){
if (document.querySelector('#input').value.localeCompare(a) == 0)
{
right2();
}
else
{
wrong2();
}
event.preventDefault();
});<div class = "wrapper">
<div class = "header">
<h1>Trivia!</h1>
</div>
<div class = "section">
<h2>Part 2: Free Response</h2>
<hr>
<h3>What is the highest mountain in South America?</h3>
<form action = "" id = "form">
<input id = "input" type = "text">
<button id = "b" type = "sumbit">Submit</button>
</form>
</div>
<h2 id = "2solution"></h2>
</div>Вы должны получить сообщение об ошибке в консоли document.querySelector('#form').addEventListener(...)
Во время отладки JavaScript консоль всегда должна быть открыта.
Знаете ли вы об использовании функции проверки инструментов разработчика вашего браузера?
@Santiago Я сделал фрагмент вашего кода, удалил лишний </div> и сделал отступ для вашего кода для лучшей читаемости.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам не хватает круглых скобок (), которые необходимы для вызова функций. правильно2() и неправильно2(). Без () они рассматриваются как ссылки на функции, а не как вызовы функций.
Исправленный код:
<script>
function wrong2() {
document.querySelector('#2solution').innerHTML = "Incorrect.";
document.querySelector('#input').style.backgroundColor = 'red';
}
function right2() {
document.querySelector('#2solution').innerHTML = "Correct!";
document.querySelector('#input').style.backgroundColor = 'green';
}
// Function for event listener
function setUpEventListener() {
a = "Aconcagua";
document.querySelector('#form').addEventListener('submit',function(event){
console.info("Input value:",document.querySelector('#input').value);
if (document.querySelector('#input').value === a) {
right2(); // Correct answer
} else {
wrong2(); // Incorrect answer
}
event.preventDefault();
});
}
// Ensure the event listener is set up after the form element exists
document.addEventListener("DOMContentLoaded", function () {
setUpEventListener();
});
</script>
DOMContentLoaded срабатывает только после полного анализа HTML-страницы, поэтому это гарантирует, что ваша форма загрузится до события.
Спасибо за ответ! Я внес эти исправления, но код по-прежнему не выводит строку, как говорит функция. Может быть, сравнение с a неверно? Я не уверен
@SantiagoDeLuca, окей, я внес кое-какие изменения, не могли бы вы консолью записать входное значение, чтобы узнать, соответствует ли оно и отображается ли оно? Также удален localeCompare и использовано строгое неравенство (===).
Я тестирую его, но он все еще не работает. Я новичок в JavaScript. Что такое console.info?
Итак, когда вы щелкаете правой кнопкой мыши на своем веб-сайте, элемент проверки? console.info используется для вывода значений на консоль, находящуюся в элементе проверки. Это полезный инструмент для отладки. В этом случае мы выводим входное значение, чтобы проверить, работает ли оно. Журнал консоли
О, ок, спасибо, я не понимаю, где именно мне следует запускать console.info. Должен ли я запускать его, когда нажимаю «Проверить веб-сайт»? при проверке я не вижу никаких ошибок, только код моего html.
Я решил проблему, видимо, в именах переменных javascript НЕ МОГУТ начинаться с цифры. И моя переменная называлась 2solution. Спасибо за помощь!
Отлично, да, точно, я помню, как удалил цифру 2. Для добавления кода javascript либо в тег сценария в конце вашего HTML между телом и тегом HTML, либо в другой файл script.js в той же папке, что и ваш HTML-файл, например, тогда вы необходимо связать его с вашим HTML-файлом в теге заголовка, используя <script src = "script.js" defer></script>
Вот рабочий пример вашего кода. Сначала у вас есть закрывающий «/div» без открывающего «div». У вас также есть опечатка в BackgroundColor (без d). Лучше определить const в начале вашего javascript (если это иногда не необходимо). Также откройте полную страницу, чтобы увидеть цветной фон при использовании фрагмента. Помимо этих ошибок ваш код мог бы работать :-)
const form = document.querySelector('#form')
const solutionDisplay = document.querySelector('#solution')
const inputField = document.querySelector('#input')
console.info(inputField)
let a = "Aconcagua";
function wrong2(){
solutionDisplay.innerHTML = "Incorrect.";
inputField.style.backgroundColor = 'red';
}
function right2(){
solutionDisplay.innerHTML = "Correct!";
inputField.style.backgroundColor = 'green';
}
form.addEventListener('submit', function(event){
if (inputField.value == a){
right2();
}
else{
wrong2()
}
event.preventDefault();
});<div>
<div class = "header">
<h1>Trivia!</h1>
</div>
<div class = "section">
<h2>Part 2: Free Response</h2>
<hr>
<h3>What is the highest mountain in South America?</h3>
<form action = "" id = "form">
<input id = "input" type = "text">
<button id = "b" type = "sumbit">Submit</button>
</form>
</div>
<h2 id = "solution"></h2>
</div>Спасибо за ответ! У меня вопрос, как этот код решает тот факт, что при запуске скрипта в заголовке форма еще не существует? Я видела, ты нигде не написал document.addEventListener('DOMContentLoaded', function(){, как это работает?
Хорошо, во-первых, ваш код всегда читается сверху вниз. Поэтому вам всегда нужно помещать javascript в конец вашего HTML после примера тега body) (или в заголовок вашего HTML, но с атрибутом defer, чтобы он запускался после HTML). Потому что, поскольку вы используете элемент DOM, вам необходимо, чтобы они были уже размещены перед вызовом их с помощью JavaScript. Не волнуйтесь, после некоторой тренировки все это станет вам очень знакомо!
Например, если вы поместите javascript поверх своего HTML-кода и вызовете h2 с id = "solution", вы получите ошибку, потому что javascript будет запущен и вызовет что-то (DOM), чего еще не существует.
ок, а как мне реализовать этот код, чтобы поместить его в заголовок моего html?
Чтобы вызвать функцию, вам нужна скобка позади имени функции, например,
right2;должна бытьright2();, но также обратите внимание, что ваш скрипт запускается до того, как элемент формы существует, поэтому ваш прослушиватель не будет установлен