当通过<a>标签，它无法正确加载
When Opening A Html File Via An <a> Tag, It Doesnt Load Properly
我正在创建一个从0-50递增的滑块。除了1之外，我已经成功地完成了我的目标。
我添加了一个按钮，它应该加载一个单独的html文件。当我点击这个按钮时，它会在浏览器顶部的URL末尾添加"？rangeInput=10"。
我做错了什么？
<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个不同的标签，因为这真的很伤脑筋！它以前像每个变量一样工作，例如starter，如果我把它放在一个单独的html文件中并运行它。按钮会完美工作！：（这与我设置并在div标记中显示它有关吗？
您在这里混合责任。您的HTML应该描述文档和使其动态的Javascript。您基本上是在使用Javascript来用HTML描述文档，因此在这一过程中会遇到一些奇怪的问题。
你几乎是把HTML放在小节中，然后用JavaScript打印小节。
相反，您应该将所有HTML放在页面中，用ID标识它们，然后使用JavaScript使用选择器根据它们的ID显示或隐藏它们。
我认为在JS中定义HTML的问题已经涵盖得很好了，所以我只关注你的问题本身。
当您使用<button>元素时，它的默认type是submit，这意味着当您单击它时，它将提交表单。由于您没有为表单指定action，因此当它提交时，它会用所有表单字段的值加载当前页面。由于您没有为表单指定method，因此它默认为get，这意味着任何表单字段的值都将作为查询字符串参数添加到URL中。这就是您看到的"？rangeInput=10"。
我无法解释当你把东西放在单独的文件中时它是如何工作的，但我的猜测是你没有在这些页面上包括表单元素。如果没有表单提交，按钮实际上不会做任何事情，所以点击事件会弹出到锚点，然后锚点会打开它链接的页面。
你可以通过添加type=button来阻止按钮提交表单。但实际上，在锚（<a>）标记中有一个按钮真的很奇怪。它们都是用来处理鼠标点击的，所以其中一个几乎总是毫无意义的。
如果您只想打开Order-Form.htm，那么您可以完全删除该按钮，因为这就是锚点的设计目的。如果要打开Order-Form.htm并传递rangeInput的值，则可以移除锚点，保持按钮不变，然后将action=Order-Form.htm添加到表单元素中。这样，单击按钮将把表单以及所有表单字段的值提交到Order-form.htm.
相关文章：
- Ajax文件加载和<输入>文件加载
- 将所选类别循环到ul>李用加载更多按钮
- 记住<选择>重新加载页面
- 仅当窗口宽度>940像素，无论是通过页面加载还是调整大小
- 当通过<a>标签，它无法正确加载
- 对象#<s>没有方法'应用'角度重新加载
- 使用加载时的Codeigner动态javascript->看法
- 如何重新加载<img/>
- javascript页面加载检查是否存在具有特定类的span(在<tr>下），如果不存在，则删除整个<
- HTML5<音频>:点击下一首歌曲时停止加载/缓冲
- “;预加载“;<音频>影响window.onload事件时间
- 如何仅在窗口宽度从桌面(>1024px）更改为移动(<1025px）导航时重新加载页面
- 如何在页面加载到<对象>要素
- 排除加载<嵌入>项
- 我的<画布>加载特定PDE文件时调整大小
- jQuery加载并不总是以<图片>元素
- 创建<ins>元素，用于在加载时进行广告，不带JQuery
- 如何制作可点击的HTML文本，加载<脚本>
- SharePoint<按钮>元素执行页面的不需要的重新加载
- 如何加载<h>元素使用jquery
