CODEWITHSUNDEEP
javascript
Moti Winkler
Moti Winkler

Reputation: 308

Why my Javascript code working only in the console?

I have a function that supposed to do a toggle after a click,

but this line of code doesn't do the job after first click.

var toggle = document.querySelector('header nav ul').className = (toggle) ? '' : 'open';

Plunker: https://embed.plnkr.co/B5iFwB/

enter image description here

Upvotes: 1

Views: 1541

Answers (4)

PMArtz
PMArtz

Reputation: 147

Add this to your code it will do top to bottom toggle, 

  $('.btn-menu').on('click',function(){
$('header nav ul').slideToggle( "slide" );

});

also you need to add JQuery to your code. Add this in your head

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Upvotes: 0

Rajesh
Rajesh

Reputation: 24915

There is no need for toggle

You should check if open class is available on element, then remove it else add it. You can use .classList.add and .classList.remove to achieve this:

Updated Code

Sample:

document.querySelector('.btn-menu').addEventListener('click', function() {
  var nav = document.querySelector('header nav ul');
  if (nav.classList.contains('open'))
    nav.classList.remove('open')
  else
    nav.classList.add('open')
})
body {
  margin-top: 80px;
}

header {
  width: 100%;
}

header .btn-menu{
  background: #e5e5e5;
  direction: rtl;
  font-size: 25px;
  padding-right: 10px;
  cursor: pointer;
}

header nav ul {
  margin: 0;
  list-style-type: none;
  text-align: center;
  background-color: #1b2125;
  height: 0;
}

header nav ul.open {
  height: auto;
}

header nav li a {
  color: #fff;
}
<header>
  <nav>
    <div class="btn-menu">≡</div>
    <ul>
      <li><a href="">Home</a>
      </li>
      <li><a href="">About</a>
      </li>
      <li><a href="">Services</a>
      </li>
    </ul>
  </nav>
</header>

Upvotes: 0

Sanjay Nishad
Sanjay Nishad

Reputation: 1605

var toggle is inside a block that is not global, you need to write code like:

var toggle;
document.querySelector('.btn-menu').addEventListener('click', function(){
    toggle = document.querySelector('header nav ul').className = (toggle) ? '' : 'open';
});

Upvotes: 2

Dai
Dai

Reputation: 155085

You're seeing this behaviour because your code references a variable toggle which is declared in the same statement. It works in the console because by the time the expression is evaluated for the second time toggle now exists.

I can't suggest an improvement because I don't know how you expect the function to work, given you don't define an initial value for toggle before your statement evaluates.

Also, you're using jQuery, but using Vanilla.js code-style within your jQuery event-handler. You should change your code to be more consistent: either only use idiomtic jQuery or idiomatic Vanilla.js.

Upvotes: 2

Related Questions