Untitled

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Editor Oldal</title>
</head>

<body>


<div id="toolBar1">
<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
<option selected>- formatting -</option>
<option value="h1">Title 1 &lt;h1&gt;</option>
<option value="h2">Title 2 &lt;h2&gt;</option>
<option value="h3">Title 3 &lt;h3&gt;</option>
<option value="h4">Title 4 &lt;h4&gt;</option>
<option value="h5">Title 5 &lt;h5&gt;</option>
<option value="h6">Subtitle &lt;h6&gt;</option>
<option value="p">Paragraph &lt;p&gt;</option>
<option value="pre">Preformatted &lt;pre&gt;</option>
</select>
<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
<option class="heading" selected>- font -</option>
<option>Arial</option>
<option>Arial Black</option>
<option>Courier New</option>
<option>Times New Roman</option>
</select>
<select onchange="formatDoc('font-size',this[this.selectedIndex].value);this.selectedIndex=0;">
<option class="heading" selected>- size -</option>
<option value="1">Very small</option>
<option value="2">A bit small</option>
<option value="3">Normal</option>
<option value="4">Medium-large</option>
<option value="5">Big</option>
<option value="6">Very big</option>
<option value="7">Maximum</option>
</select>
<select onchange="formatDoc('color',this[this.selectedIndex].value);this.selectedIndex=0;">
<option class="heading" selected>- color -</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="black">Black</option>
</select>
<select onchange="formatDoc('background-color',this[this.selectedIndex].value);this.selectedIndex=0;">
<option class="heading" selected>- background -</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="black">Black</option>
</select>
</div>

<div id="input">
<p>
<label for="textfield">Kérem irjon be egy szöveget:</label>
<input type="text" name="textfield" id="textfield">
</p>
</div>

<div id="color">
<label>Kérem adjon meg egy szint: </label><input type="color">
</div>
<p align="center">
<label id="text">Deafault Szöveg</label>
</p>

<script>
var textbox = document.getElementById('textfield');
var text = textbox.value;
function formatDoc(sCmd, sValue) {
  let szoveg = document.getElementById('text');
  let szovegdoboz = document.getElementById('textfield');
  szoveg.innerHTML = '<span style="' + sCmd + ':' + sValue+';">'+szovegdoboz.value+'</span>';

}
</script>
</body>
</html>