的Javascript文本框的值

Question

我有一個顏色選擇器：

HTML：

<input type="button" id="msg" name="msg" value="msg"> 
<label for="background-color">Choose a calor for background : </label> 
<input id="background-color" type="color" value="#ff0000" onchange="javascript:document.getElementById('chosen-color').value = document.getElementById('background-color').value;"/> 



<label for="chosen-color">You have chosen : </label> 
<input id="chosen-color" type="text" value="#ff0000"/> 

的JavaScript：

document.getElementById('msg').addEventListener('click', function() { 
      alert (colorPicker); 
      }, false); 

    //Color Picker  
    var colorPicker = (document.getElementById('chosen-color').value); 

消息框只是顯示的默認值FF0000當我點擊按鈕消息框，即使它顯示不同的值。我如何讓它顯示實際價值？

Answer 1

你永遠不會實際更新colorPicker值。

document.getElementById('msg').addEventListener('click', function() { 
    alert (document.getElementById('chosen-color').value); 
}, false); 

Answer 2

試試這個：

的document.getElementById（ '＃味精'）的addEventListener（ '點擊'，函數（）{ 警報（取色）;} ，FALSE）;

//Color Picker  
var colorPicker = (document.getElementById('#chosen-color').value); 

Answer 3

試試這個：

document.getElementById('msg').addEventListener('click', function() { 
      alert (colorPicker.value); 
      }, false); 

    //Color Picker  
    var colorPicker = (document.getElementById('chosen-color')); 

的問題是，你不更新的ColorPicker的價值它改變了。

Answer 4

colorPicker未得到更新。您還應該考慮不要使用onchange=""並將其與另一個事件偵聽器一起使用。

var colorPicker = document.getElementById('chosen-color'); 

document.getElementById('msg').addEventListener('click', function() { 
      alert (colorPicker.value); 
     }, false); 

document.getElementById('background-color').addEventListener('change', function() { 
      colorPicker.value = this.value; 
     }, false);