How to toggle style in a html element after a click event on another element-CodePudding

In this Dynamic Web Application how to change the text from Color the heading element to Uncolor the heading element by clicking checkbox and also implement that text in Javascript code by with toggle method.

Expected output is:

Toggle Image

Here is the code that I tried:

let myContainer = document.getElementById("myContainer");

function onTextAndColorChange(checkboxInput, labelId, headingId) {
    let checkboxElement = document.getElementById("checkboxInput");
    console.log(checkboxElement.checked);
    
    let labelElement = document.getElementById("labelId");
    /* I think the toggle method was implement here */
    
    let headingElement = document.getElementById("headingId");
    headingElement.classList.toggle("checked");
    
    
    
}



let inputElement = document.createElement("input");
inputElement.type = "checkbox";
inputElement.id = "checkboxInput";
inputElement.onclick = function() {
    onTextAndColorChange(checkboxInput, labelId, headingId);
};
myContainer.appendChild(inputElement);

let labelElement = document.createElement("label");
labelElement.setAttribute("for", "checkboxInput");
labelElement.textContent = "Color the heading element";
labelElement.id = "labelId";
myContainer.appendChild(labelElement);

let headingElement = document.createElement("h1");
headingElement.textContent = "heading Element";
headingElement.classList.add("heading");
headingElement.id = "headingId";
myContainer.appendChild(headingElement);

@import url("https://fonts.googleapis.com/css2?family=Bree Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair Display SC:ital,wght@0,400;0,700;1,700&family=Playfair Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source Sans Pro:ital,wght@0,400;0,700;1,700&family=Work Sans:ital,wght@0,400;0,700;1,700&display=swap");

.checked {
    color: #7a0ecc;
    background-color: #f2ebfe;
}

<!DOCTYPE html>
<html>

<head></head>

<body>
    <div id="myContainer"></div>
</body>

</html>

CodePudding user response：

Use textContent property to change label text in function:

labelElement.textContent = checkboxElement.checked 
    ? "Uncolor the heading element" 
    : "Color the heading element";

Working snippet

let myContainer = document.getElementById("myContainer");

function onTextAndColorChange(checkboxInput, labelId, headingId) {
    let checkboxElement = document.getElementById("checkboxInput");
    console.log(checkboxElement.checked);
    
    let labelElement = document.getElementById("labelId");
    labelElement.textContent = checkboxElement.checked 
        ? "Uncolor the heading element" 
        : "Color the heading element";
    
    let headingElement = document.getElementById("headingId");
    headingElement.classList.toggle("checked");
   
}

let inputElement = document.createElement("input");
inputElement.type = "checkbox";
inputElement.id = "checkboxInput";
inputElement.onclick = function() {
    onTextAndColorChange(checkboxInput, labelId, headingId);
};
myContainer.appendChild(inputElement);

let labelElement = document.createElement("label");
labelElement.setAttribute("for", "checkboxInput");
labelElement.textContent = "Color the heading element";
labelElement.id = "labelId";
myContainer.appendChild(labelElement);

let headingElement = document.createElement("h1");
headingElement.textContent = "heading Element";
headingElement.classList.add("heading");
headingElement.id = "headingId";
myContainer.appendChild(headingElement);

@import url("https://fonts.googleapis.com/css2?family=Bree Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair Display SC:ital,wght@0,400;0,700;1,700&family=Playfair Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source Sans Pro:ital,wght@0,400;0,700;1,700&family=Work Sans:ital,wght@0,400;0,700;1,700&display=swap");

.checked {
    color: #7a0ecc;
    background-color: #f2ebfe;
}

<!DOCTYPE html>
<html>

<head></head>

<body>
    <div id="myContainer"></div>
</body>

</html>