Question

我刚刚开始学习如何构建网站（只是一种兴趣），最近几个月我用书和youtube学习HTML和CSS，也开始使用JavaScript，但是在我这个时代，它很难理解。

我对一个简单的问题有疑问，所以请不要为此烦恼，我暂时在任何地方都找不到答案。

我正在构建一个简单的单位计算器。我决定将标签用作按钮，因为这样我就可以设计出想要的形状的按钮。文本栏上已经附加了一个文本框和一个数字按钮

还有一个单位按钮组-基本上，我希望用户输入（或使用按钮输入单位数），然后按单位按钮之一（英寸，厘米等）。

当按下单位按钮时，我希望在新页面中显示文本框值和单位名称（输入30并单击“英寸”应在

<中打开30英寸的新窗口我试图在这里阅读所有相关文章，但我听不懂它们，这是我的代码-希望您不会对一个老头子产生多大的兴趣:-)谢谢..

 <div id="inputbar0>

 <form action="" method="" name="vform">
 <input type ="text" min="-100000" max="1000000"

 placeholder="PEEM it!" value="" id="inputbar1">
 </div>













 <div id="selectionbar">

 <div id="inputdistancem">

  <div id="inputdistance0">
  <li class="num1" name="1" value="1" id="1" onClick=addNumber(this);><a 
 class="numbutton1" href=""></a></li>
   <li class="num2" name="2" value="2" id="2" onClick=addNumber(this);><a 
 class="button2" href=""></a></li>
   <li class="num3" name="3" value="3" id="3" onClick=addNumber(this);><a 
  class="button3" href=""></a></li>
   <li class="num4" name="4" value="4" id="4" onClick=addNumber(this);><a 
 class="button4" href=""></a></li>
</div>
<div id="inputdistance1">
  <li class="num5" name="5" value="5" id="5" onClick=addNumber(this);><a 
 class="numbutton1" href=""></a></li>
   <li class="num6" name="6" value="6" id="6" onClick=addNumber(this);><a 
 class="button2" href=""></a></li>
   <li class="num7" name="7" value="7" id="7" onClick=addNumber(this);><a 
  class="button3" href=""></a></li>
</div>
 <div id="inputdistance2">
  <li class="num8" name="8" value="8" id="8" onClick=addNumber(this);><a 
  class="numbutton1" href=""></a></li>
   <li class="num9" name="9" value="9" id="9" onClick=addNumber(this);><a 
 class="button2" href=""></a></li>
   <li class="num0" name="0" value="0" id="0" onClick=addNumber(this);><a 
   class="button3" href=""></a></li>
   <li class="numdec"    onclick="showme('.')><a class="button4" href=""> 
   </a></li>
   </div>
  <div id="inputdistance3">
  <li class="numce" title="Clear Entry" onclick="reset();" >
   <a class="numbutton1" href=""></a></li>


   <li class="numminus"   onClick="showmem('-')"><a class="button2" 
   href=""></a></li>
   <li class="numdel" title="Backspace"   onclick="del();"><a 
  class="button3" href=""></a></li>
   </div> 


   </div> 
   <br>  
   </form>

  <div id="inputdunits">

  <div id="inputdunits0">
  <li class="MM" alt="MILIMETRE"  title="MILIMETRE (mm)"   ><a    
  href=""></a></li>
   <li class="CM"alt="CENTIMETRE"  title="CENTIMETRE (cm)"><a  href=""> 
  </a></li>
   <li class="KM" alt="KILOMETRE"  title="KILOMETRE (km)"><a  href=""> 
 </a></li>
   <li class="MIM"alt="MICROMETRE"  title="MICROMETRE"><a  href=""></a> 
 </li>
</div>
<div id="inputdunits1">
  <li class="NM"alt="NANOMETRE"  title="NANOMETRE"><a  href=""></a></li>
   <li class="nmile"alt="NOUTICAL MILE"  title="NOUTICAL MILE" ><a  
   href=""></a></li>
    <li class="mile"alt="MILE"  title="MILE" ><a  href=""></a></li>
</div>
 <div id="inputdunits2">
  <li class="inch"alt="INCH"  title="INCH (in)" onclick="test()" ><a  
   href=""></a></li>
   <li class="foot" alt="foot"  title="FOOT (ft)"><a  href=""></a></li>
   <li class="yard" alt="YARD"  title="YARD"><a  href=""></a></li>
   <li class="metere"alt="METERE (M)"  title="METERE (m)" ><a  href=""> 
  </a></li>
  </div>



 </div> 

 </form>
  </div>



  <script > 

 function addNumber(element){
  document.getElementById('inputbar1').value = 
 document.getElementById('inputbar1').value+element.value;
  }
 function del() {
   var inputbar1 = document.getElementById("inputbar1");
  inputbar1.value = inputbar1.value.substr(0, inputbar1.value.length - 
  1);
   }

  function reset(){
   var resetButton = document.getElementById("inputbar1");
  if(resetButton){
    resetButton.value= "";



 }
}
</script>
<script > 


 function showme(element){  document.getElementById('inputbar1').value= 
 document.getElementById('inputbar1').value+element;


 }
 function showmem(element){  
 document.getElementById('inputbar1').value=element + 
document.getElementById('inputbar1').value;}
 </script>

我可以找到所有的JS，但无法在新页面中打开它。

Answer 1

我对JavaScript也很陌生，所以也许我完全错了，但是我认为最好的方法是通过URL，example.com?q=7meters之类的get变量发送数据。如here所示，这可以通过JavaScript来实现，只需确保在将数据显示在页面上之前对数据进行转义即可。您不希望有人对您的网站进行XSS攻击，因为一个旧项目中包含一些不良的JS。

我希望这会有所帮助，并祝你好运。

Answer 2

正如@Andreas所述，删除重复的结束标签。
将“ li”标签包装在“ ul”标签下。
将href值分配给javascript：void（0）;在所有锚链接中阻止页面刷新。
为单位按钮添加onclick属性

<a href="#" onclick="test(this)">MM</a>

在脚本中添加以下功能：

function test($this) {
  window.location.href = "result.html?value=" + $("#inputbar1").val().trim() + " " + $($this).text();
}

使用此link在新页面上读取查询字符串参数

注意：用页面网址替换“ result.html”。

Joeri的注意事项：在页面顶部显示之前进行清理，以防止XSS

如何在新页面上显示计算结果？

2 个答案: