javascript - 通过 <a> 标签打开 Html 文件时，无法正确加载

标签 javascript html css slider href

我正在创建一个从 0-50 递增的 slider 。 除了 1，我已经成功实现了我的目标。

我添加了一个按钮，该按钮应加载一个单独的 html 文件。当我单击此按钮时，它会将“?rangeInput=10”添加到浏览器顶部的 URL 末尾。

我做错了什么？

<script type="text/javascript">
function updateValue() {
var display = [];
var starter = [
'<table cellspacing="0" style="align:center;border:1px solid;">',
'<thead>',
'<td style="border-bottom:1px solid #000000;background-  color:#303030;width:1000px;padding-top:15px;padding-bottom:20px;">',
'<p align="center" style="color:#ffffff;font-size:30px;"><strong>Starter Package</strong></p>',
'</td>',
'</thead>',
'<tbody>',
'<td style="background-color:#ffffff;">',
'<center>',
'<p><strong> In this Package You Will Get:<strong><p>',
'<p>10GB Hard Drive Storage Space</p>',
'<p>Unlimited Bandwidth Transfer Per Month</p>',
'<p>CPanel Control Panel</p>',
'<p>Unlimited Email Accounts</p>',
'<p>Unlimited Amount Of Space Used For The Email Accounts</p>',
'<br>',
'<br>',
'<p style="color:red"><strong>WARNING:</strong></p>',
'<p>With This Package You Will Need To Register A Domain</p>',
'<p>We Offer Domain Registration!</p>',
'<a href="Order-Form.htm"><button class="button" id="Order_Now" style="width:125;background-color:#303030;height:35;">Order Now</button></a>',
'</center>',
'</td>',
'</tbody>',
'</table>',
'<style>',
'button#Order_Now{',
'   -moz-border-radius:15px;',
'   -webkit-border-radius:15px;',
'   border-radius:15px;',
'}',
'</style>',
].join('');

var beginner = [
'<table cellspacing="0" style="align:center;border:1px solid;">',
'<thead>',
'<td style="border-bottom:1px solid #000000;background-color:#303030;width:1000px;padding-top:15px;padding-bottom:20px;">',
'<p align="center" style="color:#ffffff;font-size:30px;"><strong>Beginner Package</strong></p>',
'</td>',
'</thead>',
'<tbody>',
'<td style="background-color:#ffffff;">',
'<center>',
'<p><strong> In this Package You Will Get:<strong><p>',
'<p>15GB Hard Drive Storage Space</p>',
'<p>Unlimited Bandwidth Transfer Per Month</p>',
'<p>CPanel Control Panel</p>',
'<p>Unlimited Email Accounts</p>',
'<p>Unlimited Amount Of Space Used For The Email Accounts</p>',
'<p><strong>This Also Includes A Domain which is yourname.com/.net/.uk/.org/</strong></p>',
'<a href="Order-Form.htm"><button class="button" id="Order_Now" style="width:125;background-color:#303030;height:35;">Order Now</button></a>',
'</center>',
'</td>',
'</tbody>',
'</table>',
'<style>',
'button#Order_Now{',
'   -moz-border-radius:15px;',
'   -webkit-border-radius:15px;',
'   border-radius:15px;',
'}',
'</style>'
].join('');

var advanced = [
'<table cellspacing="0" style="align:center;border:1px solid;">',
'<thead>',
'<td style="border-bottom:1px solid #000000;background-color:#303030;width:1000px;padding-top:15px;padding-bottom:20px;">',
'<p align="center" style="color:#ffffff;font-size:30px;"><strong>Advanced Package</strong></p>',
'</td>',
'</thead>',
'<tbody>',
'<td style="background-color:#ffffff;">',
'<center>',
'<p><strong> In this Package You Will Get:<strong><p>',
'<p>25GB Hard Drive Storage Space</p>',
'<p>Unlimited Bandwidth Transfer Per Month</p>',
'<p>CPanel Control Panel</p>',
'<p>Unlimited Email Accounts</p>',
'<p>Unlimited Amount Of Space Used For The Email Accounts</p>',
'<p><strong>This Also Includes A Domain which is yourname.com/.net/.uk/.org/</strong></p>',
'<a href="Order-Form.htm"><button class="button" id="Order_Now" style="width:125;background-color:#303030;height:35;">Order Now</button></a>',
'</center>',
'</td>',
'</tbody>',
'</table>',
'<style>',
'button#Order_Now{',
'   -moz-border-radius:15px;',
'   -webkit-border-radius:15px;',
'   border-radius:15px;',
'}',
'</style>'
].join('');

var expert = [
'<table cellspacing="0" style="align:center;border:1px solid;">',
'<thead>',
'<td style="border-bottom:1px solid #000000;background-color:#303030;width:1000px;padding-top:15px;padding-bottom:20px;">',
'<p align="center" style="color:#ffffff;font-size:30px;"><strong>Expert Package</strong></p>',
'</td>',
'</thead>',
'<tbody>',
'<td style="background-color:#ffffff;">',
'<center>',
'<p><strong> In this Package You Will Get:<strong><p>',
'<p>33GB Hard Drive Storage Space</p>',
'<p>Unlimited Bandwidth Transfer Per Month</p>',
'<p>CPanel Control Panel</p>',
'<p>Unlimited Email Accounts</p>',
'<p>Unlimited Amount Of Space Used For The Email Accounts</p>',
'<p><strong>This Also Includes A Domain which is yourname.com/.net/.uk/.org/</strong></p>',
'<a href="Order-Form.htm"><button class="button" id="Order_Now" style="width:125;background-color:#303030;height:35;">Order Now</button></a>',
'</center>',
'</td>',
'</tbody>',
'</table>',
'<style>',
'button#Order_Now{',
'   -moz-border-radius:15px;',
'   -webkit-border-radius:15px;',
'   border-radius:15px;',
'}',
'</style>'
].join('');

var business = [
'<table cellspacing="0" style="align:center;border:1px solid;">',
'<thead>',
'<td style="border-bottom:1px solid #000000;background-color:#303030;width:1000px;padding-top:15px;padding-bottom:20px;">',
'<p align="center" style="color:#ffffff;font-size:30px;"><strong>Business Package</strong></p>',
'</td>',
'</thead>',
'<tbody>',
'<td style="background-color:#ffffff;">',
'<center>',
'<p><strong> In this Package You Will Get:<strong><p>',
'<p>Unlimited Hard Drive Storage Space</p>',
'<p>Unlimited Bandwidth Transfer Per Month</p>',
'<p>CPanel Control Panel</p>',
'<p>Unlimited Email Accounts</p>',
'<p>Unlimited Amount Of Space Used For The Email Accounts</p>',
'<p><strong>This Also Includes A Domain which is yourname.com/.net/.uk/.org/</strong></p>',
'<a href="Order-Form.htm"><button class="button" id="Order_Now"    style="width:125;background-color:#303030;height:35;">Order Now</button></a>',
'</center>',
'</td>',
'</tbody>',
'</table>',
'<style>',
'button#Order_Now{',
'   -moz-border-radius:15px;',
'   -webkit-border-radius:15px;',
'   border-radius:15px;',
'}',
'</style>'
].join('');


  var rangeInput = document.getElementById("rangeInput").value
  if (rangeInput == 0) {
  document.querySelector('.display').innerHTML = '';
  }
  if (rangeInput == 10) {
  document.querySelector('.display').innerHTML = starter;
  }
  if (rangeInput == 20) {
  document.querySelector('.display').innerHTML = beginner;
  }
  if (rangeInput == 30) {
  document.querySelector('.display').innerHTML = advanced;
  }
  if (rangeInput == 40) {
  document.querySelector('.display').innerHTML = expert;
  }
  if (rangeInput == 50) {
  document.querySelector('.display').innerHTML = business;
  }
}
</script>
<form oninput="amount.value=rangeInput.value">
  <input type="range" id="rangeInput" name="rangeInput" step="10" value="0"     onchange="updateValue()" onmouseover="" min="0" max="50" >
  <div class="display"></div>
  <div align="center" style="font-size:25px;">
</form>

<div id="text" align="left" style="font-size:25px;padding-left:250px;">    </div>

<style>
input[type="range"] {
    -webkit-appearance: none;
    width: 1003px;
    height: 25px;
    border: 1px solid;
    background-color: #0066FF;
    align:left-middle;
    padding-left:0px;

}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 25px;
    height: 40px;
    border: 1px solid;
    background-color: #FFF;
    cursor:move;
}
*:focus {
    outline: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
input[type="range"]:focus{
    -webkit-appearance:
}
</style>

抱歉，所有这些真的很乱，而且都在一个文件中，我不太擅长引用 CSS 文件和其他东西，我对 HTML 真的很陌生，我正在努力自学。目前我在 HTML 上有 14 个不同的随机垃圾选项卡，因为这真的让我的大脑崩溃了!它之前像每个变量一样工作，例如启动器，如果我将它放入一个单独的 html 文件并运行它。该按钮将完美工作! :( 这与我在 div 标签中设置和显示有关吗？

最佳答案

您在这里混合了职责。您的 HTML 应该描述文档和使其动态的 Javascript。您基本上是在使用 Javascript 来描述带有 HTML 的文档，因此在此过程中您会遇到奇怪的问题。

您基本上是将 HTML 分成多个部分，然后使用 JavaScript 打印这些部分。

您应该改为将所有 HTML 放在您的页面中，用 ID 标识它们，然后使用 JavaScript 使用选择器根据它们的 ID 显示或隐藏它们。

关于javascript - 通过 <a> 标签打开 Html 文件时，无法正确加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29243786/

上一篇：php - 如何创建与 PHP 一起用于网页的模板

下一篇：css - 如何通过 CSS 仅向列表的某些元素添加样式

相关文章：

javascript - 如何使用 suitescript 获取 netsuite 当前用户的详细信息？

javascript - ng-model 未更新日期时间字段已更改

php - 从 php 文件访问样式表

HTML - 在 div 容器中插入文本

javascript - 在 Javascript 中打印数组(或对象)的处理程序/引用

javascript - 在网页设计中使用 vendor 文件夹

html - 表中的换行符

javascript - HTML5视频，没有音轨怎么检测？

firefox - css3 flexbox 在绝对 div 中水平对齐

html - sf-menu 下拉菜单不显示

©2024 IT工具网  联系我们