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