Myślałem, że ten prosty kod zadziała, ale tak nie jest. Muszę też wymyślić, jak zmienić kolor tekstu na kolor wybrany przez użytkownika za pomocą tagu
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>
0
liendrst
26 styczeń 2022, 21:06
2 odpowiedzi
Po kliknięciu przycisku dodaj wartość message
do user-sign
, a następnie zaktualizuj atrybut stylu koloru user-sign
o wartość koloru wejściowego.
// 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>
Dodatkowe informacje
0
Andy
26 styczeń 2022, 21:25
Zobacz Uwagi 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>
0
Scott Marcus
26 styczeń 2022, 21:27