Cuando uso el menú de selección y selecciono el color púrpura, por ejemplo. Quiero que el color del encabezado cambie a ese color pero no quiero que cambie el texto. El innerHTML está cambiando tanto el texto como el color. ¿Cómo hago para resolver este problema?
#header { color: green; } #list { margin-top: 20px; } .purple-color{ color: purple; } </style> </head> <body> <h1 id="header">Header</h1> <!--Change Value of Header with Input Field--> <div> Name:<input type="text" id="my-text" value=""> <p>Click the button to change the value of the header.</p> <button onclick="onChange('header')">Click Me</button> </div> <!-- Select Size Menu--> <div class= "select-menu"> <label for="header-color">Color:</label> <select name="select-menu" id = "list" onchange="changeColor()" > <option value="purple">Purple</option> <option value="blue">Blue</option> <option value="green">Green</option> </select> </div> <script> function changeColor(){ const color = document.getElementById("header"); const selectColor = document.getElementById('list').value; if (selectColor === "purple") { color.innerHTML = selectColor; color.style = 'color: #F00'; } else if (selectColor === "blue") { color.innerHTML = selectColor; color.style = 'color: #F00'; } else if (selectColor === "green") { color.innerHTML = selectColor; color.style = 'color: #F00'; } } </script>La configuración de innerHTML reemplaza el contenido HTML del elemento, en su caso, su texto. Solo usa color.style.color solo. Tenga en cuenta que he usado color.style.color , y no color.style : ¡estaba reasignando todo el objeto de estilo a una cadena!
function changeColor() { const color = document.getElementById("header"); const selectColor = document.getElementById('list').value; if (selectColor === "purple") { // color.innerHTML = selectColor; color.style.color = selectColor } else if (selectColor === "blue") { // color.innerHTML = selectColor; color.style.color = selectColor; } else if (selectColor === "green") { // color.innerHTML = selectColor; color.style.color = selectColor; } } #header { color: green; } #list { margin-top: 20px; } .purple-color { color: purple; } </style></head><body> <h1 id="header">Header</h1> <!--Change Value of Header with Input Field--> <div> Name:<input type="text" id="my-text" value=""> <p>Click the button to change the color of the header.</p> <button onclick="changeColor()">Click Me</button> </div> <!-- Select Size Menu--> <div class="select-menu"> <label for="header-color">Color:</label> <select name="select-menu" id="list" onchange="changeColor()"> <option value="purple">Purple</option> <option value="blue">Blue</option> <option value="green">Green</option> </select> </div> Su confusión aquí puede ser un buen recordatorio para tener cuidado con el nombre de las cosas. ¿Por qué no nombrar el encabezado del elemento de header o algo similar? De esa manera, cuando las personas lean su código, verán algo un poco más indicativo de lo que está sucediendo, como header.style.color = "purple" en lugar de algo confuso como color.style.color = "purple" .
Probablemente sea más eficiente que los valores del formulario sean los colores que desea establecer. Luego, puede hacer que su función changeColor() establezca el color de acuerdo con selectColor . La configuración del color del texto debe hacerse con color.style.color , no con color.style .
Además, la función changeColor() no debería cambiar el innerHTML interno del encabezado. Parece, según sus comentarios, que esto debería hacerse en respuesta a hacer clic en el botón Click Me.
Este código debería hacer lo que quieras:
<html> <head> <style type="text/css"> #header { color: green; } #list { margin-top: 20px; } </style> </head> <body> <h1 id="header">Header</h1> <!--Change Value of Header with Input Field--> <div> Name:<input type="text" id="my-text" value=""> <p>Click the button to change the value of the header.</p> <button onclick="changeText('header')">Click Me</button> </div> <!-- Select Size Menu--> <div class= "select-menu"> <label for="header-color">Color:</label> <select name="select-menu" id = "list" onchange="changeColor()" > <option value="purple">Purple</option> <option value="blue">Blue</option> <option value="green">Green</option> </select> </div> <script> function changeColor(){ const color = document.getElementById("header"); const selectColor = document.getElementById("list").value; color.style.color = selectColor; } function changeText(id) { const elem = document.getElementById(id); const text = document.getElementById("my-text").value; elem.innerHTML = text; } </script> </body> </html>La etiqueta del script después de la modificación:
<script> function changeColor(){ const color = document.getElementById("header"); const selectColor = document.getElementById('list').value; if (selectColor === "purple") { color.setAttribute('style', 'color: purple') } else if (selectColor === "blue") { color.setAttribute('style', 'color: blue') } else if (selectColor === "green") { color.setAttribute('style', 'color: green') } // You can also use something like this // color.setAttribute('style', `color: ${selectColor}`); // selectColor has to be a valid css color value } </script>