Pensé que este código simple funcionaría, pero no es así. También tengo una idea de cómo podría cambiar el color del texto en el color que el usuario elija a través de la etiqueta.
document.getElementById('button').onclick = function displayData(){ let message = document.getElementById('message').value; let sign = document.getElementById('user-sign'); sign.innerHTML = message; } <label for="message"></label> <input type="text" class="message" id="message"> <label for="color">Color: </label> <input type="color" class="color" id="color"> <input type="sumbit" id="button" value="Make a change"> <p class="user-sign" id="user-sign"></p>Cuando se haya hecho clic en el botón, agregue el valor del message a user-sign y luego actualice el atributo de estilo de color de user-sign con el valor de la entrada de color.
// Always useful to cache the elements first const message = document.querySelector('#message'); const button = document.querySelector('button'); const color = document.querySelector('#color'); const userSign = document.querySelector('#user-sign'); // Add a listener to the button button.addEventListener('click', changeColor, false); // Add the value of the message as text to the user-sign // div, and then change the colour function changeColor() { userSign.textContent = message.value; userSign.style.color = color.value; } input { display: block; margin-bottom: 1em; } <label for="message">Message</label> <input type="text" id="message" /> <label for="color">Color: </label> <input type="color" id="color" /> <button>Make a change</button> <p id="user-sign"></p>Información Adicional
Ver comentarios en línea.
// Declare your DOM variables just once. let message = document.getElementById('message'); let sign = document.getElementById('user-sign'); // Wire up events using .addEventListener(), not legacy event properties. document.getElementById('button').addEventListener("click", function (){ // Don't use .innerHTML when there is no HTML in the string sign.textContent = message.value; }); // When the color input value changes.... document.getElementById("color").addEventListener("change", function(){ // Change the color of the input message.style.backgroundColor = this.value; }); <label for="message"></label> <input type="text" class="message" id="message"> <label for="color">Color: </label> <input type="color" class="color" id="color"> <input type="button" id="button" value="Make a change"> <p class="user-sign" id="user-sign"></p>