Hey there, I'm just starting out and could really use some guidance. I want to be able to have a function called addHeading() that takes the heading type selected from a drop-down menu and the text inputted in a form field, then creates and displays the corresponding heading element. Right now, it's only showing the text without formatting it as an actual heading with the correct size. Here's what I've managed to put together so far, but I haven't been successful in finding a clear example or guide on how to achieve this. Any help would be greatly appreciated.
function addHeading() {
var x = document.getElementById("heading");
var headingText =
document.getElementById("headingText").value;
document.getElementById("divHeading").innerHTML = headingText;
}
function clearHeading() {
document.getElementById('divHeading').innerHTML = headingText = [];
}form {
width: 500px;
margin: 0px auto;
border: 1px solid khaki;
background-color: antiquewhite;
border-collapse: collapse;
padding: 10px;
margin-bottom: 20px;
}
form h2 {
margin: 0;
}
input {
margin: 5px;
}<form id='headingForm'>
<h2>Heading Form</h2>
<span>Heading Type:</span>
<select id='heading' name='heading'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
<br>
<span>Text:</span>
<input required='required' type='text' name='headingText'
id='headingText'>
<br>
<input type='button' value='Add Heading' onclick='addHeading()'>
<input type='button' value='Clear Heading' onclick='clearHeading()'>
<div id='divHeading'></div>
</form>