在当地工作。但是当我使用包裹 index.html 它不是

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.最后，我链接到这样的 js 文件。

    <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定价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";
    }
  }
}

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.我在控制台中遇到错误，因为切换正在移动，但没有启动所需的 javascript 函数，这使得定价在 1 美元到 2 美元之间波动。 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)

Answer 1

 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>

在当地工作。但是当我使用包裹 index.html 它不是

问题描述

1 个解决方案

解决方案1
0 2022-06-01 17:15:10

在当地工作。 但是当我使用包裹 index.html 它不是

问题描述

1 个解决方案

解决方案1 0 2022-06-01 17:15:10

在当地工作。但是当我使用包裹 index.html 它不是

解决方案1
0 2022-06-01 17:15:10