javascript - Javascript 出现未知错误,开发人员菜单中没有任何内容 (F12)
问题描述
我目前在一个网站上工作,我想使用 Javascript 来更改定价表的信息,以从每月到每季度循环到每年再到每月。我已修复 Firefox (F12) 上的开发者菜单中出现的问题。目前,当我单击按钮时没有任何反应,包括我没有收到任何错误消息。
我尝试更改浏览器和设备,但仍然没有收到 javascript 的响应。
这是网站的区域:
function myFunction() {
var m = document.getElementById("whPricingMonthly");
var q = document.getElementById("whPricingQuart");
var a = document.getElementById("whPricingAnnual");
if (m.style.display === "block") {
m.style.display === "none";
q.style.display === "block";
} else if (q.style.display === "block") {
q.style.display === "none";
a.style.display === "block";
} else if (a.style.display === "block") {
m.style.display === "block";
a.style.display === "none";
} else {
m.style.display === "block";
a.style.display === "none";
}
}
<div class="d-flex d-sm-flex d-lg-flex justify-content-center justify-content-sm-center justify-content-lg-center">
<button onclick="myFunction()" class="btn btn-warning d-sm-flex d-lg-flex justify-content-sm-center outline" type="button">Change payment time <br>(Monthly, Quaterly, Annually)</button>
</div><br>
<div class="col comparison" id="whPricingMonthly" style="display:block;">
<table>
<thead>
<tr class="price-header">
<th class="tl tl2" valign="bottom"><span class="price-options-desc">Monthly Pricing Options</span></th>
<th class="qbse qbse-first"> Small <span class="table-price">$2<small>.80</small><span style="font-size:16px;">/pm</span></span>
</th>
<th class="qbse qbse-second"> Business <span class="table-price">$4<span style="font-size:16px;">/pm</span></span>
</th>
<th class="qbse qbse-third"> Platinum <span class="table-price">$8<span style="font-size:16px;">/pm</span></span>
</th>
<th class="qbse qbse-last"> Ultimate <span class="table-price">$11<span style="font-size:16px;">/pm</span></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td colspan="4">Disk Space</td>
</tr>
<tr class="compare-row">
<td>Disk Space</td>
<td>10GB</td>
<td>20GB</td>
<td>50GB</td>
<td><strong>Unmetered</strong></td>
</tr>
<tr>
<td> </td>
<td colspan="4">Bandwidth</td>
</tr>
<tr>
<td>Bandwidth</td>
<td><strong>Unmetered</strong></td>
<td><strong>Unmetered</strong></td>
<td><strong>Unmetered</strong></td>
<td><strong>Unmetered</strong></td>
</tr>
<tr>
<td> </td>
<td colspan="4">Email Accounts</td>
</tr>
<tr class="compare-row">
<td>Email Accounts</td>
<td>3</td>
<td>25</td>
<td>50</td>
<td><strong>Unlimited</strong></td>
</tr>
<tr>
<td> </td>
<td colspan="4">Mailing Lists</td>
</tr>
<tr>
<td>Mailing Lists</td>
<td><span class="tickblue">✔</span></td>
<td><span class="tickgreen">✔</span></td>
<td><span class="tickgreen">✔</span></td>
<td><span class="tickgreen">✔</span></td>
</tr>
<tr>
<td> </td>
<td colspan="4">MySQL Databases</td>
</tr>
<tr class="compare-row">
<td>MySQL Databases</td>
<td>2</td>
<td>4</td>
<td>10</td>
<td><strong>Unlimited</strong></td>
</tr>
<tr>
<td> </td>
<td colspan="4">Subdomains</td>
</tr>
<tr>
<td>Subdomains</td>
<td>5</td>
<td>8</td>
<td>12</td>
<td><strong>Unlimited</strong></td>
</tr>
<tr>
<td> </td>
<td colspan="4">Parked Domains</td>
</tr>
<tr class="compare-row">
<td>Parked Domains</td>
<td>2</td>
<td>3</td>
<td>6</td>
<td><strong>Unlimited</strong></td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="options"></td>
<td class="package-btn pack-1"><a href="#" class="n-button n-button-grey show-free-download">Purchase</a></td>
<td class="package-btn pack-2"><a href="#" class="n-button n-button-blue">Purchase</a></td>
<td class="package-btn pack-3"><a href="#" class="n-button n-button-purple">Purchase</a></td>
<td class="package-btn pack-4"><a href="#" class="n-button n-button-green">Purchase</a></td>
</tr>
</tfoot>
</table>
</div>
<!-- -------------------------------------------------------------- -->
<div class="col comparison" id="whPricingQuart" style="display:none;">
为了节省空间并防止发布整个页面,我在这里停止了它 - 它与上面一样,最后一行是如何设置其他隐藏的开始。
预期的结果是它在站点上的表之间交换,将当前表上的显示设置为“无”,并将下一个设置为“阻止”。
解决方案
更改===
为=
内部 if 条件。m.style.display = "none";
===
用于比较值并=
用于赋值。需要帮助请叫我。谢谢
function myFunction() {
var m = document.getElementById("whPricingMonthly");
var q = document.getElementById("whPricingQuart");
var a = document.getElementById("whPricingAnnual");
if (m.style.display === "block") {
m.style.display = "none";
q.style.display = "block";
} else if (q.style.display === "block") {
q.style.display = "none";
a.style.display = "block";
} else if (a.style.display === "block") {
m.style.display = "block";
a.style.display = "none";
} else {
m.style.display = "block";
a.style.display = "none";
}
}
<div class="d-flex d-sm-flex d-lg-flex justify-content-center justify-content-sm-center justify-content-lg-center">
<button onclick="myFunction()" class="btn btn-warning d-sm-flex d-lg-flex justify-content-sm-center outline" type="button">Change payment time <br>(Monthly, Quaterly, Annually)</button>
</div><br>
<div class="col comparison" id="whPricingMonthly" style="display:block;">
<table>
<thead>
<tr class="price-header">
<th class="tl tl2" valign="bottom"><span class="price-options-desc">Monthly Pricing Options</span></th>
<th class="qbse qbse-first"> Small <span class="table-price">$2<small>.80</small><span style="font-size:16px;">/pm</span></span>
</th>
<th class="qbse qbse-second"> Business <span class="table-price">$4<span style="font-size:16px;">/pm</span></span>
</th>
<th class="qbse qbse-third"> Platinum <span class="table-price">$8<span style="font-size:16px;">/pm</span></span>
</th>
<th class="qbse qbse-last"> Ultimate <span class="table-price">$11<span style="font-size:16px;">/pm</span></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td colspan="4">Disk Space</td>
</tr>
<tr class="compare-row">
<td>Disk Space</td>
<td>10GB</td>
<td>20GB</td>
<td>50GB</td>
<td><strong>Unmetered</strong></td>
</tr>
<tr>
<td> </td>
<td colspan="4">Bandwidth</td>
</tr>
<tr>
<td>Bandwidth</td>
<td><strong>Unmetered</strong></td>
<td><strong>Unmetered</strong></td>
<td><strong>Unmetered</strong></td>
<td><strong>Unmetered</strong></td>
</tr>
<tr>
<td> </td>
<td colspan="4">Email Accounts</td>
</tr>
<tr class="compare-row">
<td>Email Accounts</td>
<td>3</td>
<td>25</td>
<td>50</td>
<td><strong>Unlimited</strong></td>
</tr>
<tr>
<td> </td>
<td colspan="4">Mailing Lists</td>
</tr>
<tr>
<td>Mailing Lists</td>
<td><span class="tickblue">✔</span></td>
<td><span class="tickgreen">✔</span></td>
<td><span class="tickgreen">✔</span></td>
<td><span class="tickgreen">✔</span></td>
</tr>
<tr>
<td> </td>
<td colspan="4">MySQL Databases</td>
</tr>
<tr class="compare-row">
<td>MySQL Databases</td>
<td>2</td>
<td>4</td>
<td>10</td>
<td><strong>Unlimited</strong></td>
</tr>
<tr>
<td> </td>
<td colspan="4">Subdomains</td>
</tr>
<tr>
<td>Subdomains</td>
<td>5</td>
<td>8</td>
<td>12</td>
<td><strong>Unlimited</strong></td>
</tr>
<tr>
<td> </td>
<td colspan="4">Parked Domains</td>
</tr>
<tr class="compare-row">
<td>Parked Domains</td>
<td>2</td>
<td>3</td>
<td>6</td>
<td><strong>Unlimited</strong></td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="options"></td>
<td class="package-btn pack-1"><a href="#" class="n-button n-button-grey show-free-download">Purchase</a></td>
<td class="package-btn pack-2"><a href="#" class="n-button n-button-blue">Purchase</a></td>
<td class="package-btn pack-3"><a href="#" class="n-button n-button-purple">Purchase</a></td>
<td class="package-btn pack-4"><a href="#" class="n-button n-button-green">Purchase</a></td>
</tr>
</tfoot>
</table>
</div>
<!-- -------------------------------------------------------------- -->
<div class="col comparison" id="whPricingQuart" style="display:none;">
推荐阅读
- google-bigquery - BigQuery,按组中的条件获取行数数组
- javascript - 这是什么类型的日期格式以及如何将其格式化为人类可读的格式?
- c# - 如何通过 OpenXML 为标题设置“链接到上一个”设置
- php - 无法将输入值传递给控制器
- grafana - 如何自动缩放 grafana 仪表板以适应 x 轴上的数据和 bin
- javascript - 在 Laravel 中从 html 到 JavaScript 获取值数组数据
- python - 使用 Azure 托管服务标识 (MSI) 连接 Azure SQL Server 数据库
- .net-core - Linux Centos TeamCity 构建代理无法恢复 nuget 包
- java - 在 then 部分中带有多个“insertLogical”语句的流口水以及如何在 java 中阅读这些语句
- mongodb - 如何在 Loopback 4 中使用 MongoDB 扩展运算符?