関数の結果表示

Question

私はhtmlで使用できるjavascriptを作成しようとしています。

誰かが[計算]ボタンをクリックすると、Javaスクリプトが実行され、結果が表示されます。しかし何らかの理由で、結果が正しく表示されません。誰かがこれを手伝ってくれましたか？

私のファイルはここで見つけることができます：

function outputname() { 
 
    var vl,vm,vc,il,ic,r, sum,x; 
 
    x=document.getElementById("Tool") ; 
 
\t 
 
    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; 
 

 

 
\t 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

最後の行の削除次のコードのjavaスクリプトで

outputname(); 

すべての行ページ読み込み時に実行されます。だからあなたの場合は、自分でロードするときにoutputname（）関数を呼び出すことになります。

は、formタグであなたのボタンを配置し、あなたのボタンは、あなたの関数を実行した後に提出するフォームを防ぐことができます。この

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

次のようにクリックしてください変更します。