すぐにbgの色を変更してください

Question

私はちょっと騒がしく、色のついたテキストボックスの16進コードに従って、サイトの背景色を即座に変更するようにJavaAcriptを作ろうとしています。送信ボタンを押したときに機能しますが、送信する必要はありません。事前に

おかげ

$(function(){ 
    setInterval(changeBackground, 1); 
}); 



function changeBackground() { 
    // The working function for changing background color. 
    document.bgColor = document.getElementById("color").value; 
} 

Answer 1

チェックアウトaddEventListenerとinput event。 addEventListenerは、クリック、テキストボックス値の変更などのイベントに反応することができます。inputイベントは、ユーザーが問題の要素に何かを入力するたびに発生します。

var colorEl = document.getElementById('color'); 
 
colorEl.addEventListener('input', function() { 
 
    document.bgColor = colorEl.value; 
 
});

body { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<input type="text" id="color" />

プロヒント：bgColorはもうこれを行うための好ましい方法ではありません。これは廃止されており、ブラウザでの動作は保証されていません。スタイリングするときはいつでもCSSを使う方がはるかに優れています。

document.style.backgroundColor = colorEl.value; 

するのではなく、ユーザは、次に入力すると別の場所にフォーカスを移動し終えるまで、あなたがchange eventを使用することができます待つしたい場合。

var colorEl = document.getElementById('color'); 
 
colorEl.addEventListener('change', function() { 
 
    document.bgColor = colorEl.value; 
 
});

body { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<input type="text" id="color" />

Answer 2

あなたは、私は、コードを次のように行われてきたように、あなたの<input>にonchangeイベントリスナーを割り当てる必要があり：

document.getElementById('color').addEventListener('change', changeBackground); 

Answer 3

は

アップイベントのキーを見てみてください

function changeBackground() { 
 
    document.bgColor = '#' + document.getElementById("color").value; 
 
}

<input id="color" onkeyup="changeBackground()" />

Answer 4

皆様におかれましてありがとうございます。

下記のCyril Beeckmanの提案はうまくいきましたが、すべて動作することがわかります。歓声

function changeBackground() { 
 
    document.bgColor = '#' + document.getElementById("color").value; 
 
}

<input id="color" onkeyup="changeBackground()" />