时间戳

首页 > 解决方案 > 为什么我的 JS DOM 操作结果未定义且未更改 HTML？

javascript - 为什么我的 JS DOM 操作结果未定义且未更改 HTML？

问题描述

我正在尝试通过单击它们来更改我的 HTML 中的图像。

当我在控制台中记录结果时，它会记录“未定义”。当我单击图像并且看不到 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>

标签： javascripthtmldom

解决方案

第一个问题，是的，它正在打印 undefined 因为你实际上并没有返回任何东西。当您尝试登录未返回的内容时，它本质上将是未定义的。在下面的片段中，我对其进行了编辑以返回 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 时，您只想使用 = 而不是 .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>

推荐阅读