时间戳

首页 > 解决方案 > 是否可以来回（无休止地）改变innerHTML/textContent？

javascript - 是否可以来回（无休止地）改变innerHTML/textContent？

问题描述

所以我正在考虑改变innerHTML<p>Click</p>内容从“Click”的内容更改为“Clicked”，当再次单击时，它再次变回“Click”（并且可以再次单击以导致“Clicked”无限次）。

有人可以提供线索吗？*我很感激，

到目前为止，这是我的失败尝试-->

<!DOCTYPE html>
<body>
<p id="event_01">Click</p>

<script>
    let goo = document.querySelector("#event_01");

    let clickOnce = function() {goo.innerHTML = "Clicked"};

    let clickBack = function(){
    goo.innerHTML = "Click"};

    if(goo.textContent == "Click") {
        goo.addEventListener("click", clickOnce);
    } else if (goo.textContent == "Clicked") {
        goo.addEventListener("click", clickBack);
    }

</script>

</body>

标签： javascripthtmlfrontendaddeventlistener

解决方案

您应该将您的条件放在点击处理程序中而不是外部。脚本标签之间的内容只会执行一次。当代码运行（页面加载）时，goo 的内容是 Click，因此只有将内容设置为“clicked”的侦听器才会附加到元素。相反，您应该这样做：

let goo = document.querySelector("#event_01");

let onClick = function() {
    if(goo.textContent == "Click"){
        goo.innerHTML = "Clicked";     
    } else {
        goo.innerHTML = "Click";
    }
};


goo.addEventListener("click", clickOnce);

推荐阅读