Making a text bold using DOM Events

i'm learning JavaScript now, and for practicing, i'm trying to make a text editor. Where you can type something, click a button and make it to upper or lower case, bold and talic. It worked with lower and upper case, but for some reason it doesn't work with bold.

Here's my HTML:

<h1 id="text">Escreva seu texto abaixo</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's the 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 text that will be changed will be the h1, at the top of the HTML. Also, i wrote

let value = document.getElementById("type").value

to spare me some time, but when i click the button1 (uppercase) the text just disappear. The button2, with input.value worked fine. So why the var value1 makes and the text disappear and why can't i make the text bold?

Thank you!`

Solution 1:

The problem is you are changing the input.value to bold. You can't style the input.value you should directly change the input style.

Also, you can't use the input.value = it is not built-in function like toUpperCase, it is style.

Use input.value.style.fontWeight may work, but you need to apply it back which click on other element which is messy. The easiest way is to <b> so you don't have to worry to change it back.

Also, I problem I have to mentioned, you should declare the input value inside the function, you declare it at the beginning which will always be empty since you assign the value at page loading.

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")


button1.onclick = uppercase
button2.onclick = lowercase
button3.onclick = bold
//button4.onclick = italic

function uppercase() {
let value1 = document.getElementById("type").value
  text.innerHTML = value1.toUpperCase()
}

function lowercase() {
  text.innerText = input.value.toLowerCase()
}

function bold() {
  text.innerHTML = '<b>'+input.value+'</b>'
}

<p id="text">Escreva seu texto abaixo</p>

<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>

Solution 2:

you need to give CSS to the object, not the text something like this :

input.style.fontWeight="bold";