I am currently in the process of learning JavaScript and decided to practice by creating a text editor. The goal is to type something, click a button to change it to upper or lower case, bold, or italicize. While I successfully implemented the uppercase and lowercase functions, I'm facing an issue with the bold feature.
Below is the HTML code:
<h1 id="text">Write your text below</h1> <div id="container"> <input type="text" id="type"> </div> <main> <ul> <li class="buttons"> <button id="button1">A</button> </li> <li class="buttons"> <button id="button2">a</button> </li> <li class="buttons"> <button id="button3">B</button> </li> <li class="buttons"> <button id="button4">I</button> </li> </ul> </main>
And here is the associated script:
> let text = document.getElementById("text") > let input = document.getElementById("type") > let button1 = document.getElementById("button1") > let button2 = document.getElementById("button2") > let button3 = document.getElementById("button3") > let button4 = document.getElementById("button4") > let value1 = document.getElementById("type").value > > > button1.onclick = uppercase > button2.onclick = lowercase > button3.onclick = bold > button4.onclick = italic > > function uppercase(){ > text.innerHTML = value1.toUpperCase() > } > > function lowercase (){ > text.innerText = input.value.toLowerCase() > } > > function bold(){ > text.innerText = input.value.style.fontWeight="bold"; > }
The title that will be modified is the h1 tag at the top of the HTML. In addition, I included the line:
let value = document.getElementById("type").value
to save time, but when I use button1 (uppercase), the text simply disappears. On the other hand, button2, with input.value, works perfectly fine. Can you explain why using var value1 causes the text to disappear and why I can't seem to make the text bold?
Appreciate any assistance on this matter!`