javascript - 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('msg').addEventListener('click', function() {
          alert (colorPicker.value);
          }, false);

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

问题是您在 colorpicker 更改后没有更新它的值。

Answer 3

colorPicker没有得到更新。您还应该考虑不使用onchange=""另一个事件侦听器并将其带入 javascript。

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

Answer 4

试试这个：

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

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