Dom-модель позволяющая редактировать текст
Как сделать чтоб при выборе флажка значение применялось к тексту
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Text format</title>
</head>
<body>
<form>
<h3>Введите текст и выберите стиль</h3>
<div class="continer">
<p><input type="checkbox" value="Bold">Bold</p>
<p><input type="checkbox" value="Underline">Underline</p>
<p><input type="checkbox" value="Italics">Italics</p>
<p><input type="radio" name="pos" value="Left">Left</p>
<p><input type="radio" name="pos" value="Right">Right</p>
<p><input type="radio" name="pos" value="Justify">Justify</p>
<textarea cols="30" rows="10" id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa commodi aut, eaque, vitae assumenda, pariatur illo modi ipsam quis totam, itaque. Distinctio modi illum, consectetur quam labore incidunt dicta adipisci?</textarea>
</form>
<button>Show text</button>
<hr style="margin-top: 10px;">
</div>
<script src="js/script.js"></script>
</body>
</html>
Что то пытался сделать:
function fChange(){
let prop = this.input.getAttribute('value');
if(this.getAttribute('type') == 'checkbox')
objBox[prop] = this.value + "<b>";
else
objBox[prop] = this.value;
let text = document.getElementById('text');
for(let key in objBox){
text.style.setProperty(key, objBox[key]);
console.log(key+ ":" + objBox[key] + ";");
}
}