Troubles with javascript 'click' events

Question

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

And if someone knows how to make an icon for selects just like for buttons, please enlighten me.

JavaScript:

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';
})

Please check-out the codepen: https://codepen.io/INR4GE/pen/LXzYOj

score 0 · Accepted Answer · answered Nov 18 '18 at 13:28

0

You need to add type="button" to any button that you don't want to submit the form

answered Nov 18 '18 at 13:28

justrusty

827
7
10

Thanks, it works – Bobby Fade Nov 18 '18 at 13:31
Can you mark the answer accepted and vote it up then, please? :) – justrusty Nov 18 '18 at 16:07

Troubles with javascript 'click' events

1 Answers1