Question

0

183

Views

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

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>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-13T08:04:35.982Z

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>

0

183

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

1 answers

0

Working snippet

Find remote jobs

Andres GPT