I though this simple code would work, but it doesn't. I also have to idea how I could change the color of the text in the color the user chooses via the tag
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>When the button has been clicked add the value of message to user-sign, and then update the color style attribute of user-sign with the value of the color input.
// 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>Additional information
See comments inline.
// 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>