的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);