2017-03-25 11 views
0

HTMLとJavaScriptで単純な時間と半分の電卓を作ったが、何らかの理由で計算ボタンボタンをクリックすると、P要素に結果が表示されない。ここでJavaScriptの単純な時間と半分の計算機

は私のコードです:

http://codepen.io/chrissylvester10/pen/wJxder

html> 
    <head> 
    </head> 

    <body> 
     <h1>Time and Half Calculator</h1> 
     <input id="fare" size="7" maxlength="7" name="fare" style="width:75px" value="0" /> 
     <input type="button" value="Calculate" onclick="calculator()"> 
     <p id="result"></p> 
    </body> 
</html> 

var fare = document.getElementById("#fare").value; 

function calculator() { 
    var result = fare/2 + fare; 
    document.getElementById("result").innerHTML = result; 
} 

私は変更を確認する必要があるので、それをforkしてください。

+0

"html>' "で実際に始まっていますか? –

+0

申し訳ありません私はそれを紛失しました。 – Chris

答えて

2

まず、#var fare = document.getElementById("#fare").value;には必要ありません。

それは、そうでない場合は、それだけで0

最後を返しますが、それは新しい価値にあなたがそれを変更するたびに読み込みますので、そのコード行はまた、関数内でなければなりませんvar fare = document.getElementById("fare").value;

する必要があります数字を解析して、文字列として誤読されないようにしたいとします。

function calculator() { 
    var fare = parseInt(document.getElementById("fare").value); 
    var result = fare/2 + fare; 
    document.getElementById("result").innerHTML = result; 
} 

編集:あなたは開始時の値ではなく実際の値を取得している

function calculator() { 
    document.getElementById("result").innerHTML = document.getElementById("fare").value*1.5; 
} 
+0

フォーク:http://codepen.io/coder9926/pen/EWpmGx – justanotherbadprogrammer

+0

また、「値」は文字列なので、運賃/ 2 +運賃は文字列を連結し、実際の値を加算することはありません値... try: var result =運賃/ 2 + parseInt(運賃); – karkazz

+0

その理由は、parseIntがそこにあるからです... – justanotherbadprogrammer

0

行うにははるかに簡単な方法これは次のようになります。

解決方法:fare宣言を関数内に移動します。

小変化:fareのみをidとして取得します。

function calculator() { 
 
    var fare = +document.getElementById("fare").value, 
 
     result = fare/2 + fare; 
 

 
    document.getElementById("result").innerHTML = result; 
 
}
<h1>Time and Half Calculator</h1> 
 
<input id="fare" size="7" maxlength="7" name="fare" style="width:75px" value="0" /> 
 
<input type="button" value="Calculate" onclick="calculator()"> 
 
<p id="result"></p>

0

<script>タグにあなたのJavascriptを同封してはどう? #fareから削除します。

関連する問題