버튼을 클릭 할 때 목록 요소의 우선 순위 색상 설정

Question

내 딜레마는 수행 할 작업의 우선 순위 수준을 결정하는 라디오 버튼이있는 할 일 목록 스타일 입력이있는 페이지입니다. CSS를 여기

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); 

그리고 것 :

.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"/> 
     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> 

스크립트입니다 : 여기

은 HTML 부분입니다 텍스트 상자에 무언가를 입력하여 목록에 넣고 우선 순위 라디오 버튼을 클릭하면 목록에 무엇이 들어 있는지 보여줍니다 우선 순위에 따라 빨간색, 파란색 또는 녹색 중 하나를 선택합니다 (빨간색은 높음, 파란색은 중간, 녹색은 낮음). 나는 내 인생에 대해 이것을 이해할 수 없다.

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>