I am trying to make a simple text editor where by, on tapping bold or italics, only the text being typed at the present moment gets the effect desired and not everything inside a text area. Something a long the same line as this stack overflow content editor. The far I could get is have everything in the text area affected whenever the bold or italics button is tapped. Attached is my trial code.
Here is the HTML bit:
<body>
<div class="texAreaCtrl">
<button id="bold">Bold</button>
<button id="italic">Italic</button>
</div>
<textarea id="textArea" style="width: 40%; height: 300px; font-size: 20px">
</textarea>
</body>
<script src="textEd.js"></script>
Here is the JS part:
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded',ready);
}else{
ready()
}
function ready() {
let bolden = document.getElementById('bold');
bolden.addEventListener('click', makeBold)
let italics = document.getElementById('italic');
italics.addEventListener('click', makeItalic)
}
function makeBold(event) {
document.getElementById('textArea').style.fontWeight ="bold";
}
function makeItalic(event) {
document.getElementById('textArea').style.fontStyle ="italic";
}
