I am creating HTML select dropdown (font-size). When I am selecting the value from the dropdown for example h1.
Under the dropdown I have the text which i need to apply h1.
I was trying to creating css class for all the heading tag from H1 - h6 and in the onClick of every option apply css using add and remove.
<select>
<option>h1</option>
<option>h2</option>
<option>h3</option>
</select>
<div id="text">
Text
</div>
But I don't now how to do that. Link
Kindly help me how to
You need to listen onchange event on select element, and based on the selected value apply corresponding class to the div.
One possible implementation:
// Get select element
var select = document.querySelector('select');
// Bind onchange event
select.onchange = function() {
document.querySelector('#text').className = this.value;
};
// Trigger event to apply initial value
select.onchange();.h1 {font-size: 32px;}
.h2 {font-size: 24px;}
.h3 {font-size: 19px;}<select>
<option value="h1">h1</option>
<option value="h2">h2</option>
<option value="h3">h3</option>
</select>
<div id="text">Text</div>
You should use the addEventListener method instead of the onchange property because it is considered more flexible and is part of the DOM Events specification. So, this can be considered better practice. Using properties like onchange restricts you by only allowing you to assign one event handler at a time for the target element.
Below is a solution using JavaScript to add the change event listener to the element versus modifying the property of the element itself.
(function changeListener() {
var select = document.querySelector('select'),
text = document.getElementById('text');
// add change listener
select.addEventListener('change', function () {
text.className = this.value;
});
// default size
text.className = select.value;
}());.h1 { font-size: 32px; }
.h2 { font-size: 24px; }
.h3 { font-size: 19px; }<select>
<option>h1</option>
<option>h2</option>
<option>h3</option>
</select>
<div id="text">
Text
</div>