ボタンをクリックしたときのリスト要素の優先順位の設定

Question

私のジレンマは、行うべきことの優先度を決定するラジオボタンでリストスタイルの入力があるページがあることです。ここで

はHTML部分です：

<p style="">A to-do list</p> 

<ol class="ch5"> 

</ol> 

<p>&nbsp;</p> 
<p> 
    <label for="txtAdd">New thing to do:</label> 
    <input name="txtAdd" type="text" id="txtAdd" size="50" maxlength="50"/> 
</p> 
<p>Set Priority</p> 
<p> 
    <label> 
     <input type="radio" name="rgPrior" value="hi" id="rgPrior_0"/> 
     High</label> 
     <br/> 
    <label> 
     <input type="radio" name="rgPrior" value="med" id="rgPrior_1"/> 
     Meduim</label> 
     <br/> 
    <label> 
     <input type="radio" name="rgPrior" value="low" id="rgPrior_2"/> 
     Low</label> 
     <br/> 
</p> 
<p>&nbsp;</p> 

<p> 
    <input type="button" name="btnAdd" id="btnAdd" value="Add a value" onClick="chapter05()" /> 
</p> 

はここにスクリプトです：

var list = document.getElementsByClassName('ch5')[0]; 

var todo = document.getElementById('txtAdd').value; 
var entry = document.createElement('li'); 
entry.appendChild(document.createTextNode(todo)); 
list.appendChild(entry); 

そして、ここでは、CSSです：私が達成しようとしてきた何

.hiP { 
color: red; 
    } 

    .medP { 
     color: blue; 
    } 

    .lowP { 
     color: green; 
    } 

    .ch5 { 
     padding-left: 30px; 
    } 

は、ということですテキストボックスに何かを入力してリストに入れ、優先ラジオボタンをクリックすると、リストに表示されているものは何でも表示されます優先順位に応じて赤、青、緑のいずれかになります（赤は高く、青は中、緑は低く）。私は私の人生のためにこれを理解することはできません。

Answer 1

あなたが選択された1つを見つけ、対応する値を持つ項目の色を設定するために、色のクラス値とボタンにわたるループを、オブジェクトを作成できます。

function chapter05() { 
 
    var list = document.getElementsByClassName('ch5')[0]; 
 
    btn_colors = { 
 
    'hi': 'hiP', 
 
    'med': 'medP', 
 
    'low': 'lowP' 
 
    } 
 
    radios = document.getElementsByName('rgPrior'); 
 

 
    for (var i = 0, length = radios.length; i < length; i++) { 
 
    if (radios[i].checked) { 
 
     btn_selected_color = (btn_colors[radios[i].value]); 
 
     break; 
 
    } 
 
    } 
 
    var todo = document.getElementById('txtAdd').value; 
 
    var entry = document.createElement('li'); 
 
    entry.className = btn_selected_color; 
 
    entry.appendChild(document.createTextNode(todo)); 
 
    list.appendChild(entry); 
 
}

.hiP { 
 
    color: red; 
 
} 
 

 
.medP { 
 
    color: blue; 
 
} 
 

 
.lowP { 
 
    color: green; 
 
} 
 

 
.ch5 { 
 
    padding-left: 30px; 
 
}

<p style="">A to-do list</p> 
 

 
<ol class="ch5"> 
 

 
</ol> 
 

 
<p>&nbsp;</p> 
 
<p> 
 
    <label for="txtAdd">New thing to do:</label> 
 
    <input name="txtAdd" type="text" id="txtAdd" size="50" maxlength="50" /> 
 
</p> 
 
<p>Set Priority</p> 
 
<p> 
 
    <label> 
 
     <input type="radio" name="rgPrior" value="hi" id="rgPrior_0"/> 
 
     High</label> 
 
    <br/> 
 
    <label> 
 
     <input type="radio" name="rgPrior" value="med" id="rgPrior_1"/> 
 
     Medium</label> 
 
    <br/> 
 
    <label> 
 
     <input type="radio" name="rgPrior" value="low" id="rgPrior_2"/> 
 
     Low</label> 
 
    <br/> 
 
</p> 
 
<p>&nbsp;</p> 
 

 
<p> 
 
    <input type="button" name="btnAdd" id="btnAdd" value="Add a value" onClick="chapter05()" /> 
 
</p>