0
189
VistasHow 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:
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>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta