入力フィールドに入力された数字に基づいてtdセルの色を変更します

Question

私はフォームを持っています。フォームには、番号入力フィールドがあります。最小数は1で最大値は5です。この使用は、リスクアセスメントに基づいて（1〜5の間の）数値を記載する。 1は低リスクであり、5は高リスクである。ユーザーが1を入力すると、入力フィールドがあるセルが緑色になります。彼らが5を入力した場合、私はそれが赤くなることを望みます。最初にフォームが表示されたら、色は緑色で始まります（フィールドが最初に入力されるまでは色がついていないのがうれしいですが）。数字1と2はどちらも緑色です。 3は黄色4〜橙色、5〜赤色に変化する。シンプルに聞こえますが、少し失われています。誰かが私の手で私を連れて行くことができます。私はそれを研究しましたが、私はそれ以上のものを見つけることができませんでした。

Answer 1

フォームを取得します。

var form = document.querySelector('#form'); 

私たちは、イベントの委任を使用するつもりだ - その子からバブルアップというよりは、各入力要素へ接続することをイベントをキャッチするために、親要素にイベントリスナーを取り付けます。入力でキーが押された場合は、changeColorに電話してください。

form.addEventListener('keyup', changeColor, false); 

色の配列。

var colors = ['green', 'green', 'orange', 'orange', 'red']; 

e.targetは、イベントの発生原因となった要素です。その背景色を配列の対応する色に設定します。

function changeColor(e) { 
    var input = e.target; 
    input.style.backgroundColor = colors[input.value - 1]; 
} 

DEMO