使用dom操作更改文本內容-有解無憂

我已經撰寫了一些 javascript 代碼，我覺得應該更改 html 按鈕 onclick 的內部文本，但它似乎沒有按預期作業。我一直在尋找語法錯誤，但似乎找不到任何錯誤，已將 onclick 功能放在不同的地方。我錯過了什么？

const clicked = false;
function toggle(){
    if(!clicked){
        clicked = true;
        document.getElementById("readbtn").innerHTML = "Not read";
    }
    else{
        clicked = false;
        document.getElementById("readbtn").innerHTML = "Read";
    }
}

.btn.delbtn{
    background-color: #990026;
    
}

.delbtn:hover{
    background-color: #ec0e46;
    transition: 0.7s;
}

.btn{
    border-radius: 4px;
    font-weight: 1000;
    font-size: 1rem;
    /* padding: 5px; */
    background-color: #465c6b;
    color: aliceblue;
    border: none;
    letter-spacing: 0.7px;
    padding: 10px 20px 10px 20px;
   
}

.rdbtn:hover{
    cursor: pointer;
    background-color: #779bb3;
    transition: 0.7s;
}

 <table>
        <thead>
            <tr>
                <td>Name</td>
                <td>Author</td>
                <td>Status</td>
                <td>      </td>
            </tr>
        </thead>
       
        <tbody>
            <tr>
                <td>The Hobbit</td>
                <td>J.R.R Tolkien</td>
                <td><button id="readbtn" class="btn rdbtn" onclick="toggle()">Read</button></td>
                <td><button class="btn delbtn">Delete</button></td>
            </tr>
        </tbody>
    </table>

uj5u.com熱心網友回復：

更改const clicked = false;為var clicked = false;

var clicked = false;
function toggle(){
    if(!clicked){
        clicked = true;
        document.getElementById("readbtn").innerHTML = "Not read";
    }
    else{
        clicked = false;
        document.getElementById("readbtn").innerHTML = "Read";
    }
}

.btn.delbtn{
    background-color: #990026;
    
}

.delbtn:hover{
    background-color: #ec0e46;
    transition: 0.7s;
}

.btn{
    border-radius: 4px;
    font-weight: 1000;
    font-size: 1rem;
    /* padding: 5px; */
    background-color: #465c6b;
    color: aliceblue;
    border: none;
    letter-spacing: 0.7px;
    padding: 10px 20px 10px 20px;
   
}

.rdbtn:hover{
    cursor: pointer;
    background-color: #779bb3;
    transition: 0.7s;
}

 <table>
        <thead>
            <tr>
                <td>Name</td>
                <td>Author</td>
                <td>Status</td>
                <td>      </td>
            </tr>
        </thead>
       
        <tbody>
            <tr>
                <td>The Hobbit</td>
                <td>J.R.R Tolkien</td>
                <td><button id="readbtn" class="btn rdbtn" onclick="toggle()">Read</button></td>
                <td><button class="btn delbtn">Delete</button></td>
            </tr>
        </tbody>
    </table>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/511244.html

標籤：javascriptdom按钮

上一篇：添加影像時，為什么<td>中的html按鈕的垂直對齊會丟失？

下一篇：如何使按鈕溢位到右側并可滾動