I’m currently creating a website wehre you can write and edit notes. I want to implement that you can also write in bold. I added a button to toggle this and it also works… but not like I want it to work. It only toogles after I pressed the button two times. Here is my JavaScript code:
var isBold = false;
function bold(){
if (isBold === true){
isBold = false;
document.getElementById("typeBold").style.color = "#fff";
document.getElementById("typeBold").style.borderColor = "";
document.getElementById("typeBold").style.borderWidth = "";
} else {
isBold = true;
document.getElementById("typeBold").style.color = "#5cb85c";
document.getElementById("typeBold").style.borderColor = "green";
document.getElementById("typeBold").style.borderWidth = "thick";
}
document.execCommand("bold");
}
document.getElementById("typeBold").addEventListener('click', bold);<!-- This is the HTML-Code for the button: -->
<button id="typeBold" type="button" class="typeBold"><b>F</b></button>
<!-- And this is the HTML-Code for the div: -->
<div class="input" id="input" contenteditable="true"></div>So why doesn’t it write bold directly after I click on the button. I need to press it twice to write bold but then it works every time but then the border turns green when it is off and dissapers when it is on, wich isn’t how it is supposed to work.
New contributor
Jufyer is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1