Почему мой результат манипуляции с JS DOM не определен и не меняет HTML?

Question

Я пытаюсь изменить изображения в своем HTML, нажимая на них.

Когда я записываю результат в консоль, он записывает «undefined». У меня также нет эффекта, когда я нажимаю на изображения и не вижу изменений в HTML.

const flipAllCards = function () {
    for(const card of cards) {
        card.innerHTML.replace(`<img src="img/cardback.jpeg" alt="">`)
    }
};
const cards = document.querySelectorAll(".card");
flipAllCards();
function assignImages () {
    for(const card of cards) {
        const cardName = card.id;
        const imageName = `${cardName}.jpeg`;
        function flipCard (card) {
            card.innerHTML.replace(`<img src="img/${imageName}" alt="">`);
        }
        console.log(flipCard(card));
        card.addEventListener('click', flipCard(card));
    }
}
assignImages();

И HTML:

<div class="table">
    <div class="card" id = "agentbrown"><img src="img/agentbrown.jpeg" alt=""></div>
    <div class="card" id = "agentjones"><img src="img/agentjones.jpeg" alt=""></div>
    <div class="card" id = "agentsmith"><img src="img/agentsmith.jpeg" alt=""></div>
    <div class="card" id = "spoonboy"><img src="img/spoonboy.jpeg" alt=""></div>
    <div class="card" id = "switch"><img src="img/switch.jpeg" alt=""></div>
    <div class="card" id = "trinity"><img src="img/trinity.jpeg" alt=""></div>
</div>

Answer 1

Первая проблема, да, это печать неопределенная, потому что вы на самом деле ничего не возвращаете.Когда вы пытаетесь войти в систему что-то, что не возвращается, это по сути будет неопределенным.В приведенном ниже фрагменте я отредактировал его так, чтобы он возвращал innerHTML, чтобы вы могли видеть результат.

Вторая проблема: вы не хотите использовать innerHTML.replace, если вы заменяете контент, который вы хотели бы просто сделать innerHTML = новым контентом.

.replace пытается заменить определенное подмножество символов, а не заменить содержимое.

Наконец, вы немедленно звоните по клику, потому что вы его передаете.Вам нужно обернуть его в анонимную функцию, чтобы он вызывался только по щелчку.

Кроме того, в приведенном ниже фрагменте я добавляю слово WAFFLES к каждому из ваших изменений, чтобы вы могли увидеть изменения.

const flipAllCards = function () {
    for(const card of cards) {
        card.innerHTML = `<img src="img/cardback.jpeg" alt="">`;
    }
};
const cards = document.querySelectorAll(".card");
function assignImages () {
    for(const card of cards) {
        const cardName = card.id + "WAFFLES";
        const imageName = `${cardName}.jpeg`;
        function flipCard (card) {
            card.innerHTML = (`<img src="img/${imageName}" alt="">`);
            return card.innerHTML;
        }
        console.log(flipCard(card));
        card.addEventListener('click', function(){flipCard(card)});
    }
}
assignImages();

<div class="table">
    <div class="card" id = "agentbrown"><img src="img/agentbrown.jpeg" alt=""></div>
    <div class="card" id = "agentjones"><img src="img/agentjones.jpeg" alt=""></div>
    <div class="card" id = "agentsmith"><img src="img/agentsmith.jpeg" alt=""></div>
    <div class="card" id = "spoonboy"><img src="img/spoonboy.jpeg" alt=""></div>
    <div class="card" id = "switch"><img src="img/switch.jpeg" alt=""></div>
    <div class="card" id = "trinity"><img src="img/trinity.jpeg" alt=""></div>
</div>

РЕДАКТИРОВАТЬ: Также отредактировал функцию flipAllCards, потому что она также была неправильной.При замене innerHTML вы хотите просто использовать = not .replace.То, что у вас сейчас есть, пытается сказать: замените содержимое

. Вы можете увидеть лучшее представление об этом ниже.

var element = document.getElementById('test');
// THIS WON'T UPDATE
element.innerHTML.replace('I love waffles!', 'juice is terrible');


// THIS WILL UPDATE

element.innerHTML = 'juice is amazing with waffles';

<div id="test">
    I love waffles!
<div>