Is it possible to assign two functions on a button?

Question

I'm creating a simple word processor where the user can enter any text in the dedicated text area and press three buttons which will make the text bold, italic and underline it. I've managed to do this so far however it has to undo the changes if the button has been clicked again.

I can't seem to unbold the text even when I insert both functions inside onclick.

<script>
 
function myFunctionBold() {
    document.getElementById("demo").style.fontWeight = "bold";
}
function myFunctionUnBold() {
    document.getElementById("demo").style.fontWeight = "normal";
}
function myFunctionItalic() {
    document.getElementById("demo").style.fontStyle = "italic";
}
function myFunctionUnderline() {
    document.getElementById("demo").style.textDecoration = "underline";
}
</script>

<style>
.buttonsBold {
      height: 21px;
   cursor: pointer;
   display:inline-block;
   margin: 5px 4px;
      font-weight: bolder;
}
.buttonsItalic {
      height: 21px;
   cursor: pointer;
   display:inline-block;
   margin: 5px 4px;
   font-style: italic;
}
.buttonsUnderline {
      height: 21px;
   cursor: pointer;
   display:inline-block;
   margin: 5px 4px;
   text-decoration: underline;
}
</style>

<body>
<p>This is a simple word processor.<br>
Type some text in the text area and press the buttons!
</p>
<form action="textarea"> 
Enter text here:<br>
<input id="demo" type="text" name="yourText">
</form>
<br>

<button class="buttonsBold" onclick="myFunctionBold(); myFunctionUnBold();" >Bold</p>
<button class="buttonsItalic" onclick="myFunctionItalic()">Italic</p>
<button class="buttonsUnderline" onclick="myFunctionUnderline()">Underline</p>
</body>
</html>

No. Only one function can be assigned. The function should toggle the effect (check which effect is applied, and apply the other). — J. Titus, Feb 12 '17 at 21:47
http://stackoverflow.com/questions/3910736/how-to-call-multiple-javascript-functions-in-onclick-event — Michael Coker, Feb 12 '17 at 21:48
Yes, you can. according to the codes in your post, both myFunctionBold() and myFunctionUnBold() should be called (of course that's not the right way to achieve what you want to do). but why instead ? — Shiping, Feb 12 '17 at 22:02

score 1 · Answer 1 · answered Feb 12 '17 at 21:50

You should generally avoid using inline javascript. The cleaner way would be to use a separate script and addEventListener(), with that you can easily assign as many functions as you wish:

var btn = document.getElementById('btn');

btn.addEventListener('click', doThis);
btn.addEventListener('click', doThat);

function doThis() {
   alert("done this");
}

function doThat () {
  alert("done that");
}

<button id="btn">Click</button>

score 0 · Answer 2 · answered Feb 12 '17 at 21:50

You dont need to call two function on click, you can logically concatenate it inside one function,

function toggleBold() {
    if(document.getElementById("demo").style.fontWeight == "bold"){
        document.getElementById("demo").style.fontWeight = "normal"
    }else{
    document.getElementById("demo").style.fontWeight = "bold"
    }
}

This function will toggle bold.

Demo : https://jsfiddle.net/nvujtne7/

Is it possible to assign two functions on a button?

2 Answers2