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

Question

我刚刚开始学习如何构建网站(只是作为一种爱好)我在过去的几个月里通过书籍和 youtube 学习了 HTML 和 CSS，还开始学习 JavaScript，但在我这个年纪很难理解。

我有一个关于一个简单问题的问题，所以请不要为此烦恼，我只是暂时找不到答案。

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

还有一个单位按钮组 - 基本上我希望用户输入(或使用按钮输入单位数)然后按其中一个单位按钮(英寸、厘米等)。

按下单位按钮时，我希望在新页面中显示文本框值和单位名称(输入 30 并单击“英寸”应打开一个新窗口，其中 30 英寸为

< p> 或 elements 。我试图在这里阅读所有相关文章，但我就是无法理解它们。这是我的代码 - 希望你不会让老人觉得很有趣 :-) 谢谢..

 <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 的 get 变量中发送数据，example.com?q=7meters 之类的。这可以通过 JavaScript 实现，如 here 所示只需确保在将数据显示在您的页面上之前对其进行转义即可。你不希望有人做 XSS攻击您的网站，因为一个旧元素中有一些糟糕的 JS。

希望这对您有所帮助，祝您好运。