CODEWITHSUNDEEP
javascriptjqueryhtml
renat natanael
renat natanael

Reputation: 137

Can't put script inside jQuery

Hello I have a script like this

$(document).ready(function() { 

      // TODO: Make class toggle logic more efficient

      // Global variables
      var maxChoiceCount = 2;

      // DOM elements
      var choiceItems   = document.querySelectorAll(".boxParent li");
      var maxCountLabel = document.getElementById("max-count");

      // Update max count label
      maxCountLabel.textContent = maxChoiceCount;

      // Checklist item handler
      var checkItem = function() {
        activeItems = document.querySelectorAll(".boxParent li.active");

        if (activeItems.length === maxChoiceCount) {
          if (this.className === "active") {
            this.className = "";
          }
        } else {
          if (this.className === "active") {
            this.className = "";
          } else {
            this.className = "active";
          }
        }
      }

      // Handle logic to enforce max count
      for (var i = 0, l = choiceItems.length; i < l; ++i) {
        choiceItems[i].onclick = checkItem
      }
    });

The function just for give a sign for a selected <li>. I put this script inside index.js and I call it on my html page like this:

<script src="js/index.js"></script>

and it didn't work, it got error in console and said like this:

**index.js:22 Uncaught ReferenceError: activeItems is not defined**

but when I copy the script and put inside the html, it work fine.

Why cant I store it on my index.js?

I don't like to put many script inside my html.

Here is the fiddle. https://jsfiddle.net/ddnvraf8/

Upvotes: 2

Views: 79

Answers (5)

Adrian Gheorghe
Adrian Gheorghe

Reputation: 677

activeItems = document.querySelectorAll(".boxParent li.active");

Your variable is undeclared.

var activeItems = document.querySelectorAll(".boxParent li.active");

Upvotes: 0

Saibal Roy
Saibal Roy

Reputation: 431

Please use the code snippet:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">.box{
  max-width:240px;
}
.box h4{
    margin: 4px 15px;
}
.boxParent li:last-child{
  border-bottom: solid thin #d8d8d8
}
.boxParent li.active:after{
    content: "\2713";
    color: #F8E74E;
}

.boxParent li:after {
    background: #fff;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 24px;
    line-height: 24px;
    position: absolute;
    right: 10px;
    text-align: center;
    width: 24px;
}
.boxParent li.active {
    background: #fff;
    font-weight: 700;
}</style>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="box">
  <div class="box-header">
    <h4>Categories</h4>
  </div>
  <div class="boxCaption">
    <h3 style="display:none;">Select up to <span id="max-count">0</span> choices</h3>
    <ul class="boxParent">
      <li>Lorem ipsum</li>
      <li>Lorem ipsum dolor </li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit </li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum </li>
    </ul>
  </div>
</div>
</body>
</html>

In index.js :

 $(document).ready(function() { 

          // TODO: Make class toggle logic more efficient

          // Global variables
          var maxChoiceCount = 2;

          // DOM elements
          var choiceItems   = document.querySelectorAll(".boxParent li");
          var maxCountLabel = document.getElementById("max-count");

          // Update max count label
          maxCountLabel.textContent = maxChoiceCount;

          // Checklist item handler
          var checkItem = function() {
            activeItems = document.querySelectorAll(".boxParent li.active");

            if (activeItems.length === maxChoiceCount) {
              if (this.className === "active") {
                this.className = "";
              }
            } else {
              if (this.className === "active") {
                this.className = "";
              } else {
                this.className = "active";
              }
            }
          }

          // Handle logic to enforce max count
          for (var i = 0, l = choiceItems.length; i < l; ++i) {
            choiceItems[i].onclick = checkItem
          }
        });

Hope this solves your problem. Thanks.

Upvotes: 0

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21565

The likely reason why you are getting this error is because you are placing your JavaScript file in Strict mode, which prohibits the use of any global variables. Since activeItems is declared globally strict mode would give the error:

Uncaught ReferenceError: activeItems is not defined

Note being in strict mode means you have "use strict"; somewhere in your JS file, commonly at the top:

"use strict";

// Other code

Under normal JavaScript (not in strict-mode), despite global variables commonly being known as bad practice, you code would work functionally the same in this case and have no errors. The solution would be to make the variable local:

var activeItems = ... ;

Upvotes: 0

renat natanael
renat natanael

Reputation: 137

the problem just like the other guy who delete his post. i didnt add var in activeItems = document.querySelectorAll(".boxParent li.active"); so it have to var activeItems = document.querySelectorAll(".boxParent li.active"); why u delete ur post dude cant give a thumbs up.

Upvotes: 1

Cookie Ninja
Cookie Ninja

Reputation: 1184

Try adding a var on the activeItems = document.querySelectorAll(".boxParent li.active"); line.

var activeItems = document.querySelectorAll(".boxParent li.active");

Because it seems to be not initialized.

Upvotes: 1

Related Questions