मैं हालांकि यह सरल कोड काम करेगा, लेकिन ऐसा नहीं है। मुझे यह भी विचार करना है कि मैं टेक्स्ट के रंग को उस रंग में कैसे बदल सकता हूं जिसे उपयोगकर्ता टैग के माध्यम से चुनता है

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 जिंदा 2022, 21:06

2 जवाब

जब बटन क्लिक किया गया हो तो message का मान user-sign में जोड़ें, और फिर रंग इनपुट के मान के साथ user-sign की रंग शैली विशेषता को अपडेट करें।

// 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>

अतिरिक्त जानकारी

0
Andy 26 जिंदा 2022, 21:25

टिप्पणियाँ इनलाइन देखें।

// 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 जिंदा 2022, 21:27