Locally working. But when i use parcel index.html it's not

Question

I have a pricing page where I have a toggle to switch between annual and monthly. At the end, I am linking to a js file like this.

    <div class="top">
          <div class="toggle-btn">
            <span style="margin: 0.8em;">Annually</span>
            <label class="switch">
              <input type="checkbox" id="checbox" onclick="check()" ; />
              <span class="slider round"></span>
            </label>
            <span style="margin: 0.8em;">Monthly</span></div>
        </div>

<header><h2><em>Hobbyist</em></h2>
  <p class="pricing text1">$2 per month</p>  
  <p class="pricing text2">$1 per month billed yearly</p>
 </header>
  

   <script src="js/pricing.js"></script>
    <script src="js/main.js"></script>

And pricing js looks like this


function check() {
  var checkBox = document.getElementById("checbox");
  var text1 = document.getElementsByClassName("text1");
  var text2 = document.getElementsByClassName("text2");
  for (var i = 0; i < text1.length; i++) {
    if (checkBox.checked == true) {
      text1[i].style.display = "block";
      text2[i].style.display = "none";
    } else if (checkBox.checked == false) {
      text1[i].style.display = "none";
      text2[i].style.display = "block";
    }
  }
}

I'm getting an error in the console as a result the toggle is moving but not kicking in the required javascript function that makes the pricing move between $1 and $2 dollars. Can someone suggest me how to fix this? I'm quite new to programming.

Error

    Uncaught ReferenceError: check is not defined
    at HTMLInputElement.onclick ((index):74:74)

score 0 · Answer 1 · answered Jun 01 '22 at 17:15

0

Pricing.js

function check() {
  var checkBox = document.getElementById("checbox");
  var text1 = document.getElementsByClassName("text1");
  var text2 = document.getElementsByClassName("text2");
  for (var i = 0; i < text1.length; i++) {
    if (checkBox.checked == true) {
      text1[i].style.display = "block";
      text2[i].style.display = "none";
    } else if (checkBox.checked == false) {
      text1[i].style.display = "none";
      text2[i].style.display = "block";
    }
  }
}

<!DOCTYPE html>
<html>
  <head>
    <script src="pricing.js"></script>
  </head>
<body>

<div class="top">
  <div class="toggle-btn">
    <span style="margin: 0.8em;">Annually</span>
    <label class="switch">
      <input type="checkbox" id="checbox" onclick="check()" ; />
      <span class="slider round"></span>
    </label>
    <span style="margin: 0.8em;">Monthly</span></div>
</div>
</body>
</html>

answered Jun 01 '22 at 17:15

Chetan Ghadiya

366
5
16

Thanks for your responding. Move script tag to the head tag. Is that the fix? Could you please let me know why is that an issue. – Newbie_developer Jun 01 '22 at 17:20
i have copied your code and run on my computer its working fine there is no error like this – Chetan Ghadiya Jun 01 '22 at 17:23
So when toggle movies ....pricing changes from 1$ to 2$. But in my case, only toggle moves, the pricing doesn't change. It working for me locally as well....but when I use parcel ...its not – Newbie_developer Jun 01 '22 at 17:26
please can you share more code? where i can see class names like text1, text2 in html – Chetan Ghadiya Jun 01 '22 at 17:30
I have added some more code. let me know if you need more info – Newbie_developer Jun 01 '22 at 17:32
for now when i checked on Monthly its displaying "$2 per month" and when i uncheck its displaying "$1 per month billed yearly" – Chetan Ghadiya Jun 01 '22 at 17:38
so please explain what will be the result when i check and uncheck – Chetan Ghadiya Jun 01 '22 at 17:39
Intially $1 will be displayed..on moving toggle( checking) $2 will be displayed – Newbie_developer Jun 01 '22 at 17:41
use this if we need to display $1 initially – Chetan Ghadiya Jun 01 '22 at 17:45
What about onClick change. Currently I am getting the error check is not defined as shared in the question – Newbie_developer Jun 01 '22 at 17:54
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/245241/discussion-between-newbie-developer-and-chetan-ghadiya). – Newbie_developer Jun 01 '22 at 18:00

Locally working. But when i use parcel index.html it's not

1 Answers1