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

Javascript文本框值

4 个答案: