Javascript Methods

Question

I am trying to create a toggle function with JavaScript (not jQuery).

I have created an ID named box , and a class within the ID named box-open .

The width of the ID box is 100px.

The width of box-open is set to 1000px.

When I try to use my code I get this error, that displays “Cannot set property 'display' of undefined”.

I have tried writing the code a couple of different ways, but I always seem to get the same error in the console.

 function toggle(open) { box = document.getElementById('box').style.display = 'block'; if (open == true) { box.style.display = 'none'; boxOpen = document.getElementsByClassName('box-open').style.display = 'block'; } else { box.style.display = 'block'; boxOpen.style.display = 'none'; } } 

 #box { width: 100px; height: 100px; background: gold; text-align: center; display: block; } .box-open { width: 50px; height: 50px; background: green; display: none; } 

 <div id="box" class="box-close"></div> <button type="button" onClick="toggle()">click me</button> 

This is a link to my codepen, where you can find the code

http://codepen.io/2bu/pen/YNYjjR

Answer 1

I am not sure but this line:

box = document.getElementById('box').style.display = 'block'

should be maybe

box = document.getElementById('box');

Answer 2

Your function is not very flexible because it can only toggle a specific box with ID "box". Instead you could pass in a selector for the element you want to toggle:

<div id="box" class="box-close"></div>
<button type="button" onClick="toggle('#box')">click me</button>

And then in your Javascript:

function toggle(selector) {
  var box = document.querySelector(selector);
  var isOpen = box.style.display === "block";
  box.style.display = isOpen ? "none" : "block";
}

This way you can use the same toggle function to toggle any box you like.

Answer 3

Here is a simple jQuery implementation. Just change the .box-toggled class to be whatever you actually want. It also uses eventListener to keep your HTML cleaner.

https://jsfiddle.net/segbxnh3/3/

var box = document.querySelector('#box');
var toggleButton = document.querySelector('button');

toggleButton.addEventListener('click', function() {
    $(box).toggleClass('box-toggled');
});

UPDATE:

Here is a vanilla JS implementation. https://jsfiddle.net/segbxnh3/5/

var box = document.querySelector('#box');
var toggleButton = document.querySelector('button');

toggleButton.addEventListener('click', function() {
  if (box.classList.contains('box-toggled')) {
        box.classList.remove('box-toggled');
  } else {
    box.classList.add('box-toggled');
  }
});

Answer 4

You can use like this.

 function toggle(open, element){ box = document.getElementById('box'); boxOpen = document.getElementById('box-open'); if ( open == true) { box.style.display = 'none'; boxOpen.style.display = 'block'; element.setAttribute('onclick', "toggle(false, this);"); }else{ box.style.display = 'block'; boxOpen.style.display = 'none'; element.setAttribute('onclick', "toggle(true, this);"); } } 

 *{ margin:0px; padding:0px; font-family: 'Montserrat', sans-serif; } #box{ width:100px; height: 100px; background: gold; text-align: center; display:block; } #box-open{ width:50px; height: 50px; background: green; display: none; } 

  <div id="box"></div> <div id="box-open"></div> <button type="button" onClick="toggle(true, this);" >click me </button> 

Also, check this solution