В моем коде ничего не происходит, хотя это может быть правильно
Я понятия не имею, что мне добавить или изменить в моем коде. Считается, что эта программа выводит «правильно», когда вы отправляете текст в текущем году «2023», но я не получаю никаких ошибок или чего-либо еще. Это просто не работает. P.S выводит "неправильно", даже если это правда
const date = new Date();
const input = document.querySelector('.js-input').value;
const button = document.querySelector('.js-button');
const body = document.querySelector('body');
button.addEventListener('click', yearfunc);
function yearfunc(event) {
if (input == date.getFullYear()) {
const div = document.createElement('div');
button.insertAdjacentElement('afterend', div);
div.innerText = 'Correct';
} else {
const div = document.createElement('div');
button.insertAdjacentElement('afterend', div);
div.innerText = 'Incorrect';
}
event.preventDefault();
}<p>What the year is it right now?</p><br><br>
<input type = "text" class = "js-input">
<button class = "js-button">Send</button>Также обратите внимание: если вы хотите всегда отменять событие в функции, делайте это в самом начале функции, чтобы даже ошибки в функции все равно отменяли событие. Это в основном полезно при проверке отправки формы или AJAX. В ВАШЕМ случае, если кнопки не в форме не нужно предотвращать дефолт в функции. Однако, чтобы быть в безопасности на случай, если вы позже завернете их в форму, всегда делайте кнопки, которые не нужны для отправки type = "button"
![Интервьюер: Почему '[] instanceof Object' возвращает "true"?](https://cdn-images-1.medium.com/max/120/0*3Q2LAQJh9HQrdTPK)
Ответы 4
Разница в том, что вы присвоили '.value' слишком рано в коде. Присвоение его непосредственно в функции и сравнение с использованием новой переменной решает проблему, попробуйте это:
const date = new Date();
const input = document.querySelector(".js-input");
const button = document.querySelector(".js-button");
button.addEventListener("click", yearfunc);
function yearfunc(event) {
const value = input.value;
console.info(`VALUE: `, value);
console.info(`YEAR: `, date.getFullYear());
if (value == date.getFullYear()) {
const div = document.createElement("div");
button.insertAdjacentElement("afterend", div);
div.innerText = "Correct";
} else {
const div = document.createElement("div");
button.insertAdjacentElement("afterend", div);
div.innerText = "Incorrect";
}
event.preventDefault();
}<p>What year is it right now?</p>
<br /><br />
<input type = "number" class = "js-input" />
<button class = "js-button">Send</button>
<script src = "javascript.js"></script>Вы получаете ввод вне события, поэтому, когда событие действительно происходит, вы просто сравниваете предварительно загруженное значение "". Решение состоит в том, чтобы получить входные данные внутри обработчика событий:
// JavaScript code
const button = document.querySelector('.js-button');
const body = document.querySelector('body');
button.addEventListener('click', yearfunc);
function yearfunc(event) {
const date = new Date();
const input = document.querySelector('.js-input').value;
if (input == date.getFullYear()) {
const div = document.createElement('div');
button.insertAdjacentElement('afterend', div);
div.innerText = 'Correct';
}
else {
const div = document.createElement('div');
button.insertAdjacentElement('afterend', div);
div.innerText = 'Incorrect';
}
event.preventDefault();
}
- Если вы определяете CONST, вы не хотите, чтобы значение менялось (поскольку его нельзя переназначить). Ваш код не работал, потому что вы прочитали входное значение один раз. В вашей функции вы обработали входную переменную, которая вернула фиксированное первое значение, прочитанное селектором вне функции. Таким образом, функция НИКОГДА не получит текущее значение. Таким образом, чтобы исправить это, вы должны:
- Поместите входной запрос в yearfunc
Руан Мендес был прав. Спасибо за подсказку. Этот ответ должен быть лучше. Это расширенная версия с объяснением ;-)
Рабочий пример:
<!DOCTYPE html>
<html lang = "en">
<head>
<title></title>
<meta charset = "UTF-8">
<meta name = "description" content = "">
</head>
<body>
<p>What the year is it right now?</p><br><br>
<input type = "text" class = "js-input">
<button class = "js-button">Send</button>
<script>
const date = new Date();
const button = document.querySelector('.js-button');
const body = document.querySelector('body');
button.addEventListener('click', yearfunc);
function yearfunc(event) {
// input = document.querySelector('.js-input').value // global variable, if "let" or "var" not used. this variable can be accessed outside of the function
var input = document.querySelector('.js-input').value // using var makes variable only accessible inside of function
if (input == date.getFullYear()) {
const div = document.createElement('div');
button.insertAdjacentElement('afterend', div);
div.innerText = 'Correct';
}
else {
const div = document.createElement('div');
button.insertAdjacentElement('afterend', div);
div.innerText = 'Incorrect';
}
event.preventDefault();
}
</script>
</body>
</html>Большое спасибо, но у меня есть еще один вопрос. Почему вы не добавили «let» или «var» после ввода? Что это значит?
Это потому, что это плохой ответ, который устраняет несвязанные проблемы и не объясняет, в чем проблема, и, кроме того, создает глобальную переменную, которая не будет работать в строгом режиме. Голосование против...
Это решение создает входное значение в yearfunc. Поскольку вы технически не меняете его, опции «const», «let», «var» не имеют значения. Обновлено: также имеет значение, если вы оставили переменную «ввод» вне функции, один шаг, который вам нужно сделать, это обновить переменную «ввод» при нажатии кнопки. Поэтому необходимо использовать «let» или «var».
Этот код должен работать. То, как значение бралось из класса js-input, не давало правильного входного значения.
const date = new Date();
const input1 = document.getElementsByClassName("js-input");
const button = document.querySelector('.js-button');
const body = document.querySelector('body');
button.addEventListener('click', yearfunc);
function yearfunc(event) {
console.info("in the function")
console.info(input1[0].value)
console.info(date.getFullYear())
if (input1[0].value == String(date.getFullYear())) {
const div = document.createElement('div');
button.insertAdjacentElement('afterend', div);
div.innerText = 'Correct';
}
else {
const div = document.createElement('div');
button.insertAdjacentElement('afterend', div);
div.innerText = 'Incorrect';
}
event.preventDefault();
}
Попробуйте получить значение .js-input из обработчика событий.