title: Troubles with javascript 'click' events
body: <p>Made a simple text editor with different buttons for text styling. The problem is when i click on bold button to make the text bold, it applies the fontWeigth = 'bold' for text, but then immediately returns back to 'normal'. Ive tried hiding some 'div's on click with other buttons, but the same problem keeps happening(they disappear and reappear again). </p>
  
  <p>And if someone knows how to make an icon for selects just like for buttons, please enlighten me.</p>
  
  <p>JavaScript:</p>
  
  <pre><code>function getId(x) {
  return document.getElementById(x);
  }
  
  getId('bold').addEventListener('click', function () {
  if (getId('text').style.fontWeight == 'bold') {
      getId('text').style.fontWeight = 'normal';
  }
  else {
      getId('text').style.fontWeight = 'bold';
  }
  })
  
  getId('edit-btn').addEventListener('click', function() {
      getId('editWrapper').style.display = 'block';
      getId('formWrapper').style.display = 'none';
      getId('main').style.display = 'none';
      getId('textArea').style.display = 'block';
  })
  </code></pre>
  
  <p>Please check-out the codepen:
  <a href="https://codepen.io/INR4GE/pen/LXzYOj" rel="nofollow noreferrer">https://codepen.io/INR4GE/pen/LXzYOj</a></p>