Toggle Style Javascript

Question

I am trying to write a simple toggle function in Javascript. What it does is take an element, a style name, and a desired value. If the current value of that style on the element is the empty string, that means it hasn't been set, so we set it to the given value. Otherwise, set it to the empty string to disable it.

My code is below:

function toggleStyle(el, styleName, value) {
  if (el.styleName === '')
  {
    el.styleName = value;
  }
  else
  {
    el.styleName = '';
  }
}

However, I'm unsure how I call this function if I want to toggle the visbility of a box. I know to directly change the visibility: I would normally do:

var box = document.getElementById("box");
box.style.display = "none";

But how would I call my toggleStyle to do this? I've tried writing:

toggleStyle (box, display, "none");
toggleStyle (box, style.display, "none");
toggleStyle (box.style, display, "none");

but nothing seems to work.

because you are looking for a variable display, an object style.... use quotes and bracket notation — epascarello
– epascarello, Commented Dec 6, 2017 at 2:06
See this question about setting object properties where the property name is dynamic: stackoverflow.com/questions/4244896/… — nnnnnn
– nnnnnn, Commented Dec 6, 2017 at 2:16

epascarello · Accepted Answer · 2017-12-06 02:13:28Z

2

bracket notation is what you need and you need to pass strings.

function toggleStyle(el, styleName, value) {
  if (el.style[styleName] !== value) {  //better to check that it is not the value you have
    el.style[styleName] = value;
  } else {
    el.style[styleName] = '';
  }
}

var btn = document.querySelector("button")
var div = document.querySelector("#foo")
btn.addEventListener("click", function () {
  toggleStyle(div, "display", "none")
});

<button type="button">Click Me</button>
<div id="foo">FOO</div>

Where would this fail? Color codes are one thing, but this is the basic step in the right direction.

answered Dec 6, 2017 at 2:13

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Derek 朕會功夫 · Accepted Answer · 2017-12-06 02:10:03Z

0

You should write it like this instead:

function toggleProp(obj, prop, value){
    obj[prop] = obj[prop] ? "" : value; 
}

toggleProp(box.style, "display", "none");

You should also learn how to use the debugger:

From this we can see that it was because the variable display is not defined before using it.

answered Dec 6, 2017 at 2:10

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Comments

Christian Santos · Accepted Answer · 2017-12-06 02:13:18Z

0

Two things:

First, change your toggleStyle function so that it modifies the element's style property directly, and use bracket notation to dynamically access the property element of the style object:

function toggleStyle(el, styleName, value) {
    if (el.style[styleName] === '') {
        el.style[styleName] = value;
    } else {
        el.style[styleName] = '';
    }
}

Second, pass a string of the style property when you use toggleStyle:

toggleStyle(box, "display", "none"); // display needs to be in quotes

edited Dec 6, 2017 at 2:13

answered Dec 6, 2017 at 2:11

Christian Santos

5,4551 gold badge20 silver badges24 bronze badges

1 Comment

nnnnnn Over a year ago

The if condition should check el.style[styleName] too.

Collectives™ on Stack Overflow

Toggle Style Javascript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related