时间戳

首页 > 解决方案 > 在按钮 onclick 中切换文本

javascript - 在按钮 onclick 中切换文本

问题描述

我试图在每次单击按钮时在“已读”和“未读”之间切换文本。这些按钮是用 js 动态创建的，并放置在 HTML 表格中。每个按钮都有一个唯一的 ID，但类名相同。

我编写了一个 if 语句，它适用于表中设置的第一个按钮，但相同的 if 语句不适用于动态创建的按钮。

我已经为 if 语句尝试了许多不同的变体。我不确定最好的方法是否是访问唯一 ID，但我不知道该怎么做。任何帮助表示赞赏！谢谢

这是一个 repl https://repl.it/repls/SpryVisibleMining

function toggleText(){
     if (readButton.innerHTML == "READ"){
        readButton.innerHTML = "NOT READ";
        } else if (readButton.innerHTML == "NOT READ"){
        readButton.innerHTML = "READ";
        } else {
        null
        }
        }

这是不会做任何事情的 if 语句

function toggleOthers() {
    let toggle = document.getElementsByClassName(".readBtn")

    toggle[0].addEventListener("click", () => {

        if (toggle.innerHTML == "READ") {
            toggle.innerHTML = "NOT READ"
        } else if (toggle.innerHTML == "NOT READ") {
            toggle.innerHTML = "READ"
        } else {
            null
        }
    })
}

toggleOthers()

标签： javascripthtml

解决方案

例如你可以使用这个：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="toggle(this)">not read</button>
<script>
function toggle(e) {
  let txt = e.innerText;
  e.innerText = txt == 'not read' ? 'read' : 'not read';
}
</script>
</body>
</html>

让我知道它是否不适合您的用例...

您还可以使用querySelectorAll()获取所有按钮，然后使用for()循环设置此事件。

推荐阅读