JS сравнение innerHTML
Работаем над проектом для класса. Я пытаюсь передать два элемента <li> в функцию ниже по одному. Затем я пытаюсь сравнить innerHTML, который является элементом <i>. Если он совпадает, я вызываю одну функцию. Если нет, я звоню другому.
Но, когда я его запускаю, он не работает. Я вставил console.info в код в качестве теста, и они никогда не срабатывают. Есть идеи, что происходит?
gameDeck.addEventListener("click", function(e) {
e.preventDefault();
incrementMove();
const pick = e.target;
display(pick);
addCards(pick)
})
function display(card) {
card.className += " open show";
}
let pick1, pick2;
function addCards(openCard){
if (!pick1) {
let pick1 = openCard;
} else if (!pick2) {
let pick2 = openCard
console.info(pick1)
console.info(pick2)
if (pick1.innerHTML == pick2.innerHTML) {
match();
} else {
reset();
}
}
}
Я видел несколько связанных вопросов по этой теме, но все они используют jquery, которого я не знаю.
вы забыли вызвать свою функцию?
Удалите let из addCards()
@KevinB: Я добавил дополнительный код, касающийся вызова функции. В принципе, я вижу проблему: переменные каждый раз сбрасываются на undefined, но я не знаю, как это решить. Мне нужно сохранить первый элемент, затем сохранить второй, а затем сравнить два на соответствие на innerHTML.
@HughB На этот вопрос существует ответ, объясняющий, как решить эту проблему.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
let pick1 = openCard;
Вы повторно объявляете функцию pick1внутри.
Это создает новую переменную, которая маскирует глобальную переменную с тем же именем.
Каждый раз, когда вы запускаете функцию, вы получаете новый pick1 и новый pick2, оба из которых являются undefined.
Следовательно, вы всегда попадете в первую половину if/else.
Удалите объявления let из этих двух переменных внутри функции.
Мне надоело, что OP комментирует, что это не сработает, вместо того, чтобы на самом деле попробовать.
gameDeck.addEventListener("click", function(e) {
e.preventDefault();
const pick = e.target;
addCards(pick)
})
let pick1, pick2;
function addCards(openCard){
if (!pick1) {
pick1 = openCard;
} else if (!pick2) {
pick2 = openCard
console.info(pick1)
console.info(pick2)
if (pick1.innerHTML == pick2.innerHTML) {
match();
} else {
reset();
}
}
}
function match() {
alert("They match");
}
function reset() {
alert("They don't match");
}<div id = "gameDeck">
<button>One</button>
<button>Two</button>
<button>Three</button>
</div>Я добавил остальную часть кода, чтобы вы могли видеть, чего я пытаюсь достичь.
но я пытаюсь каждый раз передавать значение из события addEventListener; в первый раз присвойте значение pick1, во второй раз присвойте значение pick2, затем сравните. Я не вижу, как обойти эту проблему.
@HughB - Вы делаете то, что я сказал в последней строке этого ответа.
но если я это сделаю, я никогда не буду присваивать им значения, которые я пытаюсь сравнить, которые являются значениями из событий щелчка в вышеупомянутом addEventListener. Думаю, вот в чем вопрос: как мне назначить значения из двух независимых событий щелчка, чтобы сравнить их без перезаписи. На самом деле я поместил их в список в более ранней версии, но позже в программе это не удалось по другой причине. Мне нужно, чтобы они были двумя переменными, а не элементами списка.
"но если я сделаю это, я никогда не буду присваивать им значения, которые я пытаюсь сравнить, которые являются значениями из событий щелчка в вышеупомянутом addEventListener" - Что? Да, вы будете.
pick1 и pick2 присваиваются значения в openCard внутри функции (те два утверждения, о которых вы говорите), больше нигде. let pick1, pick2 вне функции предназначались просто для создания переменных. Найдите в коде прослушиватель событий, в котором вызывается функция addCards.
@HughB - «pick1 и pick2 присваиваются значения в openCard внутри функции (те два утверждения, о которых вы говорите), больше нигде». - Я не думаю, что вы понимаете, что означает remove «let». Это не означает «Удалить всю строку, начинающуюся с let».
Ты прав. Я думаю, что это помогло мне, когда я усвоил это разъяснение. Это не значит, что я «говорил, что это не сработает», не попробовав на самом деле, я просто неправильно понял наше заявление.
Не могли бы вы также рассказать, как это используется? с какими данными?