Toogle between multiple variables does not work?

Question

I want a toggle between font style. For example: If fontstyle does not exist in an element or if it is italic or oblique to insert normal, if it is normal to remove fontstyle after clicking on normal button.

I tried to solve this by inserting more variables in if (a || b|| c), but it doesn't work? Is this the correct way and is this possible or am I wrong somewhere in the code?

<div id="fontstyle">font-style</div>

<button onclick="ElementTextStyleNormal()">Normal</button>
<button onclick="ElementTextItalic()">Italic</button>
<button onclick="ElementTextOblique()">Oblique</button>

function ElementTextStyleNormal(){
       var x = document.getElementById("fontstyle").style.fontStyle;
       if (!(x == "" || x == "italic" || x == "oblique")) {
       document.getElementById("fontstyle").style.fontStyle = "normal";
       }
       else if (x == "normal") {
       document.getElementById("fontstyle").style.fontStyle = "";
       }
}

function ElementTextItalic(){
       var x = document.getElementById("fontstyle").style.fontStyle;
       if (!((x == '') || (x == 'normal') || (x == 'oblique'))) {
       document.getElementById("fontstyle").style.fontStyle = "italic";
       }
       else if (x == "italic") {
       document.getElementById("fontstyle").style.fontStyle = "";
       }    
}

function ElementTextOblique(){
       var x = document.getElementById("fontstyle").style.fontStyle;
       if (!((x == '') || (x == 'normal') || (x == 'italic'))) {
       document.getElementById("fontstyle").style.fontStyle = "oblique";
       }
       else if (x == "oblique") {
       document.getElementById("fontstyle").style.fontStyle = "";
       }    
}

dosathengachutney · Answer 1 · 2021-10-12T21:01:31.520

Try to simplify this by using a single function and the passing in the styleName as function parameter.

function ElementTextStyle(styleName){
       var elem = document.getElementById("fontstyle");
       elem.style.fontStyle = elem.style.fontStyle === styleName ? "" : styleName;
}

<div id="fontstyle">font-style</div>

<button onclick="ElementTextStyle('normal')">Normal</button>
<button name="italic" onclick="ElementTextStyle('italic')">Italic</button>
<button name="oblique" onclick="ElementTextStyle('oblique')">Oblique</button>

Toogle between multiple variables does not work?

1 Answers1