0

カラーピッカーがあります：

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 が表示されます。実際の値を表示するにはどうすればよいですか?

4

4 に答える 4

1

実際に値を更新することはありませんcolorPicker。

document.getElementById('msg').addEventListener('click', function() {
  alert (document.getElementById('chosen-color').value);
}, false);
于 2013-03-05T20:45:03.423 に答える
0

は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);
于 2013-03-05T21:04:08.820 に答える
0

これを試して：

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

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

問題は、変更後に colorpicker の値を更新していなかったことです。

于 2013-03-05T20:47:20.400 に答える
-1

これを試して：

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

//Color Picker    
var colorPicker = (document.getElementById('#chosen-color').value);
于 2013-03-05T20:44:41.303 に答える