Change Font of Text Area as Per DropdownList Selection

Question

I have a dropdownlist and a text area in my html file and code is as below

<select id='ddlViewBy' name='ddlViewBy' onchange='applyfonttotextarea()'>
<option value = '1'>Arial</option>
<option value = '2' selected = 'selected'>Comic Sans</option>
<option value ='3'>Courier New</option>
</select>"

Now in the above code I have added an onchange method in the dropdownlist as applyfonttotextarea() In this method, I need to write a logic in javascript to apply the selected font style in the text area. How to write that function.

For ex. In the textarea I have entered " Hello Friends. How are You? "and I have selected the "Hello" word in it and select the Courier New option from the dropdown, the textarea's "Hello" should be in Courier New font.Any suggestions?

Answer 1

A simple solution would be to implement a change event handler to your <select> element where:

1. Identify the newly selected option of that <select>
2. Read the text of that selected option
3. Apply that text as the active font family to the <textarea> you want to update

In code this can be achieved as:

 document.getElementById('ddlViewBy').addEventListener('change', function(event) { /* Get select element of change event */ const selectElement = event.currentTarget; /* Get selected option (step 1) */ const selectedOption = selectElement.options[selectElement.selectedIndex]; /* Get font family name from selected option's text (step 2) */ const fontFamily = selectedOption.text; /* Get text area, and update it's fontFamily style (step 3) */ document.getElementById('myTextarea').style.fontFamily = fontFamily; });

 <select id='ddlViewBy' name='ddlViewBy'> <option value='1'>Arial</option> <option value='2' selected='selected'>Comic Sans</option> <option value='3'>Courier New</option> </select> <br/> <textarea id="myTextarea">some text</textarea>

Note also that this aproach means that the inline binding of onchange='applyfonttotextarea()' is no longer required.

Hope that helps!