本地工作。但是，当我使用包裹索引时

发布于 2025-02-03 17:30:03 字数 1593 浏览 3 评论 0原文

我有一个定价页面，可以在年度和每月之间进行切换。最后，我链接到这样的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>

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

我会在控制台上遇到错误，因为切换正在移动，但没有启动所需的JavaScript功能，这使得定价在$ 1到$ 2美元之间。有人可以建议我解决这个问题吗？我是编程的新手。

错误

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

原文

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)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜｀诱少女 2025-02-10 17:30:03

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>

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>

回复收藏 0 原文

~没有更多了~