Question

我正在尝试制作一个可以在html中使用的javascript。

我希望当有人点击按钮计算时，它会运行java脚本，然后它应该显示结果。但是，由于某种原因，它直接显示结果。有人可以帮我这个。

我的文件可以在这里找到：

function outputname() {
  var vl,vm,vc,il,ic,r, sum,x; 
  x=document.getElementById("Tool") ;
	
  vl=x.elements["VL"].value;
  vm=x.elements["VM"].value;
  vc=x.elements["VC"].value;
  il=x.elements["IL"].value;
  ic=x.elements["IC"].value;
  r=x.elements["R"].value; 

  

  sum=r;


	document.getElementById("Tool").innerHTML += " is not valid! <br>";
  document.getElementById("Tool").innerHTML += sum+"<br>";
  


}

outputname();

body {
  background-color: #119ed8;
}

label {
  text-align: left;
  width: 200px;
  display: block;
  float: left;
  clear: left;
  margin-right: 3px;
  cursor: pointer;
  font: normal 16px ventura;
  color: white  
}

.button{
  width: 95px;
  font: normal 16px ventura;
  margin-right: 3px;
  margin-bottom: 3px;
}

.print{
  width: 350px;
  height: 200px; 
}

<form id="form1">
  <p><label for="Vectorlength">Vector length (bp):</label> 
    <input type="text" name="Vectorlength" value="" />
  </p>
  <p><label for="Vectormass">Vector mass (ng):</label> 
    <input type="text" name="Vectormass" value="" />
  </p>
  <p><label for="Vectorconcentration">Vector concentration (ng/µL):</label> 
    <input type="text" name="Vectorconcentration" value="" />
  </p>
  <p><label for="Insertlength">Insert length (bp):</label> 
    <input type="text" name="Insertlength" value="" />
  </p>
  <p><label for="Insertconcentration ">Insert concentration (ng/µL):</label> 
    <input type="text" name="Insertconcentration" value="" />
  </p>
  <p><label for="Ratio">Ratio Insert/Vector:</label> 
    <input type="text" name="Ratio" value="3" />
  </p>


</form>
<button onclick="outputname()">Submit</button>
<p id="demo"></p>

非常感谢提前

Answer 1

在最后一行删除以下代码

outputname();

在java脚本中，在页面加载时执行的每一行。所以在你的情况下，你在自己加载时调用outputname（）函数。

将您的按钮放在表单标签中，然后像这样修改按钮

<button onclick="outputname(); return false;">Submit</button>

这将阻止您的表单在执行功能后提交。

功能结果显示

1 个答案: