Este es un ejemplo simple para ayudar con un proyecto más grande:
Resultado deseado : cuando escribe un nombre en el cuadro de formulario, aparece una oración con el nombre incluido. Sin embargo, solo el nombre debe tener el color rojo, y solo en el resultado (no debe ser rojo cuando aparece en el cuadro de formulario).
Recibo un error cuando incluyo "nameHere.style.color" en este código:
JS:
function getResponse(){ var nameHere = document.getElementById("name").value; nameHere.style.color = "red"; var resultValue = "Hello my name is " + nameHere + ", nice to meet you."; document.getElementById("result").innerHTML = resultValue; }HTML:
<div class="formclass"> <label for="name">Input name here</label> <input id="name" onchange="getResponse()"></input> </div> <div id="result"></div>¿Hay alguna forma real de hacer lo que estoy tratando de hacer dentro de JavaScript?
Editar: para enfatizar, realmente quiero cambiar el color de la variable que toma el elemento. valor - no sólo el elemento. Y quiero que aparezca en el resultado como el color. No puedo encontrar nada que me permita hacer esto correctamente.
Básicamente, aplica estilos a los elementos, no al texto sin procesar. En su código, está tratando de establecer la propiedad de style de un fragmento de texto sin formato, que no tiene una propiedad de style y, por lo tanto, está dando un error. En este caso, debe agregar un elemento para distinguir su name de salida. A partir de ahí, puede tener una clase lista (a esta .theName ) y aplicar el nombre de la clase al elemento o simplemente puede configurar el estilo directamente (como lo estaba intentando) a través del script. Muestro ambos ejemplos aquí. El segundo usa un setTimeout , que es solo para permitir un breve retraso antes de cambiar el color, eso es solo para fines ilustrativos.
function getResponse(){ let nameHere = document.getElementById("name").value; let resultValue = `Hello my name is <span class='theName'>${nameHere}</span>, nice to meet you.`; document.getElementById("result").innerHTML = resultValue; // or if you want to change the element after it's been written to the page setTimeout(() => { document.querySelector('.theName').style.color='blue'; }, 1000); } .theName{ color:red; } <div class="formclass"> <label for="name">Input name here</label> <input id="name" onchange="getResponse()"></input> </div> <div id="result"></div>Claro, solo necesita usar un elemento como span en lugar de una cadena literal.
const input = document.getElementById("name"); const result = document.getElementById("result"); function getResponse() { const name = input.value; let nameWrapper = document.createElement('span'); nameWrapper.style.color = 'red'; nameWrapper.innerText = name; result.innerHTML = ''; result.appendChild(document.createTextNode('Hello my name is ')); result.appendChild(nameWrapper); result.appendChild(document.createTextNode(', nice to meet you.')); } <div class="formclass"> <label for="name">Input name here</label> <input id="name" onchange="getResponse()"> </div> <div id="result"></div>