Javascript 是否可以前后（无休止地）更改innerHTML/textContent？_Javascript_Html_Frontend_Addeventlistener

Javascript 是否可以前后（无休止地）更改innerHTML/textContent？

javascript html

Javascript 是否可以前后（无休止地）更改innerHTML/textContent？,javascript,html,frontend,addeventlistener,Javascript,Html,Frontend,Addeventlistener,因此，我正在考虑将Click的innerHTML从“Click”的内容更改为“Clicked”，当再次单击时，它会再次更改为“Click”（并且可以再次单击，结果是“Clicked”无数次）有人能提供线索吗*我很感激这是我迄今为止失败的尝试--> 单击让goo=document.querySelector（“#event_01”）；让clickOnce=function（）{goo.innerHTML=“Clicked”}；让我们单击返回=函数（）{ goo.innerHTML=“单

因此，我正在考虑将

Click

的innerHTML从“Click”的内容更改为“Clicked”，当再次单击时，它会再次更改为“Click”（并且可以再次单击，结果是“Clicked”无数次）

有人能提供线索吗*我很感激

这是我迄今为止失败的尝试-->


单击
让goo=document.querySelector（“#event_01”）；
让clickOnce=function（）{goo.innerHTML=“Clicked”}；
让我们单击返回=函数（）{
goo.innerHTML=“单击”}；
如果（goo.textContent==“单击”）{
goo.addEventListener（“单击”，单击一次）；
}else if（goo.textContent==“单击”）{
goo.addEventListener（“单击”，单击返回）；
}

您只需检查

的

.innerHTML

的值，将其与当前的.innerHTML进行比较并相应地更改


单击
函数myFunction（）{
var x=document.getElementById（“事件_01”）；
如果（x.innerHTML==“单击”）{
x、 innerHTML=“单击”；
}否则{
x、 innerHTML=“单击”；
}
}

您只需要一个侦听器，从一开始就连接：

let goo = document.querySelector("#event_01");
goo.addEventListener("click", clickListener);

let clickListener = function() {
    if (goo.innerHTML == "<p>Click</p>")
        goo.innerHTML = "<p>Clicked</p>";
    else
        goo.innerHTML = "<p>Click</p>";
}

let goo=document.querySelector（“#event_01”）；
goo.addEventListener（“单击”，单击Listener）；
让我们单击Listener=function（）{
如果（goo.innerHTML==”单击“”）
goo.innerHTML=“已单击””；
其他的
goo.innerHTML=“单击””；
}

您应该将条件放在单击处理程序内部，而不是外部。脚本标记之间的内容将只执行一次。当代码运行时（在页面加载时），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);

这很简单。您添加了很多代码。首先，单击p时，您会将单击事件分配给clickOnce，但在clickOnce中返回您从未分配clickBack

下面是一个关于你想做什么的例子

let goo=document.querySelector（“#event_01”）；
单击我=函数（）{
如果（goo.textContent==“单击”）
{
goo.innerHTML=“单击”；
}
其他的
{
goo.innerHTML=“单击”；
}
}
goo.addEventListener（“单击”，单击我）
单击
如果不想使用函数或变量，可以使用e.target.textContent

<!DOCTYPE html> 
<body>
    <p id="event_01">Click</p>
    <script>
        document.querySelector("#event_01").addEventListener('click', (e) => {
            if (e.target.textContent === 'Click') {
                e.target.textContent = 'Clicked'
            } else if (e.target.textContent === 'Clicked') {
                e.target.textContent = 'Click'
            }
        })
    </script>
</body>


单击
document.querySelector（“#event_01”）.addEventListener（'click'，（e）=>{
如果（e.target.textContent=='单击'）{
e、 target.textContent='Clicked'
}else if（e.target.textContent==‘单击’）{
e、 target.textContent='单击'
}
})
感谢Mohammedreza Farahani先生在我的代码中编辑了一些错误。；）谢谢！谢谢你，先生。对每个人来说，这似乎只是一个非常简单的问题再次感谢@Alen.toma如果您碰巧是一名经验丰富的前端工程师，那么这可能只是“简单的”：
<!DOCTYPE html> 
<body>
    <p id="event_01">Click</p>
    <script>
        document.querySelector("#event_01").addEventListener('click', (e) => {
            if (e.target.textContent === 'Click') {
                e.target.textContent = 'Clicked'
            } else if (e.target.textContent === 'Clicked') {
                e.target.textContent = 'Click'
            }
        })
    </script>
</body>