0
185
VistasCómo alternar el estilo en un elemento html después de un evento de clic en otro elemento
En esta aplicación web dinámica, cómo cambiar el texto de Colorear el elemento del encabezado a Decolorar el elemento del encabezado haciendo clic en la casilla de verificación y también implementar ese texto en código Javascript con el método de alternancia .
La salida esperada es:
Aquí está el código que probé:
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 la propiedad textContent para cambiar el texto de la etiqueta en la función:
labelElement.textContent = checkboxElement.checked ? "Uncolor the heading element" : "Color the heading element";fragmento de trabajo
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