Javascript code to switch an elements inner text?

Question

I've written some code on javascript that should switch the text of a button with a onclick listener on it. but it doesn't seem to work and I'm not sure what's wrong with it.

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

*{
    box-sizing: border-box;
}

body{
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    background-color: #1e2227;
    font-size: 25px;
    color:#779bb3;
}

h1{
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
}

form{
    justify-content: center;
    display: flex;
    flex-direction: row;
    gap: 35px;
}

label{
    font-size: 20px;
    font-family:'Courier New', Courier, monospace
}


table{
    border-collapse: collapse;
    width: 30em;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 10px 30px 5px rgba(0,0,0,.15);
    margin: 100px auto;
    
}

table thead td{
    background-color: rgb(38, 36, 36);
    color: whitesmoke;
    border-bottom: .5px solid black;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 8px;
    
}

table tbody td {
    padding: 8px;
    
}

table tbody tr td:nth-child(4){
    text-align: center;
}

table tbody tr td:nth-child(3){
    text-align: center;
}

table thead tr td:nth-child(3){
    text-align: center;
}

table td{
    font-size: 18px;
    color: rgb(38, 36, 36);
}

.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;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple book library</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="title">Simple book library</h1><br>
    <form>
        <div>
            <label for="Book">Book</label>
            <input type="text" id="Book">
        </div>
        
         <div>
            <label for="Author">Author</label>
            <input type="text" id="Author">
         </div>
    
        <div>
            <label for="status">Status</label>
            <select name="status" id="status">
                <option value="Read">Read</option>
                <option value="Not read">Not read</option>
            </select>
            
        </div>

       <br>
       
        <div> 
            <button type="submit">Submit</button>
        </div>
    </form>

    <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 class="btn rdbtn" onclick="toggle();">Read</button></td>
                <td><button class="btn delbtn">Delete</button></td>
            </tr>
        </tbody>
    </table>

    <script src="script.js"></script>
</body>
</html>

It's notable, that when you've more than one book in the table, your fixed code will only work with the first element. For tasks like this, use [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) and refer an element via the element's location related to the event target in the HTML structure. — Teemu, Oct 03 '22 at 09:01

Javascript code to switch an elements inner text?

0 Answers0