那些遇到过的问题

通过<a>标签打开Html文件时,它没有正确加载

0 html javascript css slider href

我正在创建一个从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>
Run Code Online (Sandbox Code Playgroud)

很抱歉,所有这一切都非常混乱,并且都在一个文件中,我不擅长引用CSS文件和东西,我真的很新的HTML,我正在努力教自己.目前我在HTML上随机废话有14个不同的标签,因为这真的是在扼杀我的大脑!它像每个变量一样工作,例如starter,如果我将它放入一个单独的html文件并运行它.按钮会完美运作!:(是否与我设置并在div标签中显示它？

Ave*_*isG 6

你在这里混合责任.您的HTML应该描述文档和Javascript使其动态化.您基本上使用Javascript来描述带有HTML的文档,因此您会遇到奇怪的问题.

您几乎将HTML放入部分,然后使用JavaScript打印部分.

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

归档时间：

查看次数：

42 次

最近记录：

10 年，8 月 前
相关归档
如何跳转到jQuery.each()util中的下一个迭代？ 428
jQuery切换CSS？ 72
使用TypeScript设置window.location 61
您可以在HTML脚本标记上同时使用async和defer属性吗？ 60
在HTML页面中加载CSS文件的顺序是什么？ 24
Jquery手机尺寸太小 24
如何设置svg宽度和svg高度百分比？ 23
Bootstrap - 任何人都可以给我任何例子,如何设置JS按钮？ 20
从表单发布数组 18
使用jquery UI范围Slider,获取值 3
难疑归档
设置JavaScript函数的默认参数值 2277
如何决定何时使用Node.js？ 2198
在JavaScript中生成特定范围内的随机整数？ 1836
Vim清除上次搜索突出显示 1824
如何创建一个像链接一样的HTML按钮？ 1769
何时使用虚拟析构函数？ 1420
如何在Android应用程序中的活动之间传递数据？ 1293
如何从我的应用程序中在Android的Web浏览器中打开URL？ 1282
MVC和MVVM有什么区别？ 1275
为什么使用Redux而不是Facebook Flux？ 1126