單擊按鈕時設置列表元素的優先顏色

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

您可以創建顏色類值的對象，遍歷按鈕查找選擇一個，並與相應的值設置的項目顏色：

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>