0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>We have learned about the style property and changed the font color in the article. Muffin wants the font color to change to the one that the user selected from the “Font Color” dropdown list. We already worked with dropdown lists in the<a>previous chapter</a>.</p>
1
<p>We have learned about the style property and changed the font color in the article. Muffin wants the font color to change to the one that the user selected from the “Font Color” dropdown list. We already worked with dropdown lists in the<a>previous chapter</a>.</p>
2
<p>The “Font Color” list has 18 values. The user can select one of them by expanding the list and clicking on the desired color:</p>
2
<p>The “Font Color” list has 18 values. The user can select one of them by expanding the list and clicking on the desired color:</p>
3
<p>The selected value is stored in the value property in the dropdown list. To change the color of the text to the one that the user selected, we need to write the selected value to the style property of the article.</p>
3
<p>The selected value is stored in the value property in the dropdown list. To change the color of the text to the one that the user selected, we need to write the selected value to the style property of the article.</p>
4
<p>The font color should change when the user selects a new value. Therefore, use the onchange event handler. For example:</p>
4
<p>The font color should change when the user selects a new value. Therefore, use the onchange event handler. For example:</p>
5
// Find the dropdown list let select = document.querySelector('select'); // Add the event handler to the list select.onchange = function () { // Change the font color to the selected value longread.style.color = select.value; };<p>The “Font Color” list on the news site has the color-setting class. Find it and save it as a variable. Then add the event handler to the list and change the font color in the article to the selected value.</p>
5
// Find the dropdown list let select = document.querySelector('select'); // Add the event handler to the list select.onchange = function () { // Change the font color to the selected value longread.style.color = select.value; };<p>The “Font Color” list on the news site has the color-setting class. Find it and save it as a variable. Then add the event handler to the list and change the font color in the article to the selected value.</p>