Al escribir algo en "entrada", es visible en tiempo real en div. Es necesario que cuando se presiona el botón B, el texto seleccionado en div se ponga en negrita y luego se vuelve sin negrita cuando se presiona nuevamente. Pero no necesito ninguna biblioteca o marco. Necesito usar solo JavaScript. Probé los métodos getSelection y execCommand pero no ayudaron․
const textArea = document.getElementById("textArea"); const input = document.getElementById("input"); const bold = document.getElementById("bold"); let span = document.createElement("span"); input.addEventListener("input", e => { span.textContent = e.target.value; textArea.appendChild(span); }); #textArea { width: 360px; height: 350px; padding: 5px; font-size: 15pt; word-wrap: break-word; overflow: scroll; border: 2px solid #ccc; } button { width: 150px; height: 50px; border: none; cursor: pointer; } .inputDiv { margin-top: 5px; } #input { width: 370px; height: 50px; border: none; outline: none; background-color: #ccc; font-size: 15pt; } #workspace button { width: 50px; margin: 5px auto; background-color: #d9d9d9; } #workspace button:hover { width: 50px; margin: 5px auto; background-color: #999999; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="myDiv"> <div id="workspace"> <button id="bold">B</button> <div id="textArea"></div> </div> <div class="inputDiv"> <input type="text" name="text" id="input" placeholder="type something..."> </div> </div> <script src="script.js"></script> </body> </html>