title: Making a text bold using DOM Events
body: <p>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.</p>
  <p>Here's my HTML:</p>
  <blockquote>
  <pre><code>&lt;h1 id=&quot;text&quot;&gt;Escreva seu texto abaixo&lt;/h1&gt;
  
  &lt;div id=&quot;container&quot;&gt;
      &lt;input type=&quot;text&quot; id=&quot;type&quot;&gt;
  &lt;/div&gt;
  &lt;main&gt;
      &lt;ul&gt;
          &lt;li class=&quot;buttons&quot;&gt;
              &lt;button id=&quot;button1&quot;&gt;A&lt;/button&gt;
          &lt;/li&gt;
          &lt;li class=&quot;buttons&quot;&gt;
              &lt;button id=&quot;button2&quot;&gt;a&lt;/button&gt;
          &lt;/li&gt;
          &lt;li class=&quot;buttons&quot;&gt;
              &lt;button id=&quot;button3&quot;&gt;B&lt;/button&gt;
          &lt;/li&gt;
          &lt;li class=&quot;buttons&quot;&gt;
              &lt;button id=&quot;button4&quot;&gt;I&lt;/button&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/main&gt;
  </code></pre>
  </blockquote>
  <p>And here's the script:</p>
  <blockquote>
  <pre><code>&gt;  let text = document.getElementById(&quot;text&quot;)
  &gt;         let input = document.getElementById(&quot;type&quot;)
  &gt;         let button1 = document.getElementById(&quot;button1&quot;)
  &gt;         let button2 = document.getElementById(&quot;button2&quot;)
  &gt;         let button3 = document.getElementById(&quot;button3&quot;)
  &gt;         let button4 = document.getElementById(&quot;button4&quot;)
  &gt;         let value1 = document.getElementById(&quot;type&quot;).value
  &gt; 
  &gt; 
  &gt;         button1.onclick = uppercase
  &gt;         button2.onclick = lowercase
  &gt;         button3.onclick = bold
  &gt;         button4.onclick = italic
  &gt; 
  &gt;         function uppercase(){
  &gt;             text.innerHTML = value1.toUpperCase()
  &gt;         }
  &gt; 
  &gt;         function lowercase (){
  &gt;             text.innerText = input.value.toLowerCase()
  &gt;         }
  &gt; 
  &gt;         function bold(){
  &gt;             text.innerText = input.value.style.fontWeight=&quot;bold&quot;;
  &gt;         }
  </code></pre>
  </blockquote>
  <p>The text that will be changed will be the h1, at the top of the HTML. Also, i wrote</p>
  <blockquote>
  <p>let value = document.getElementById(&quot;type&quot;).value</p>
  </blockquote>
  <p>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?</p>
  <p>Thank you!`</p>