ホームページを作ろ！--inputで計算。
まず基本形。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>入力を受けて何かする</title>
<style>
body{
font-family: sans-serif;
}
</style>
<script>
</script>
</head>
<body>
Hellow
</body>
</html>"Hellow"と表示されます。
さて本題の"input"です。Javascriptで値を取得して、計算したいと思います。
<input>はtype を指定してやることでいろんなものが入れることができます。例えば、文字をはじめ、数字、数字でも日付、パスワードなど。
書き方ですが、まず<form></form>で囲んでから、<input>の要素を書いていきます。
<p></p>は違うものでも良いです。例えば<label></label>でもOK!
<form><input>で"name"を付けることが重要です。この名前でJavasctiptで操作していきます。
<form name="fm">
<p>値1 : <input type="number" value="8"></p>
<p>値2 : <input type="number" value="2"></p>
<p>答 : <input type="number" value=""></p>
<input type="button" value= "Button" onclick="calc()"
</form>こんな感じで書いたら、あとはスクリプトを書きます。
まず、
<script> </script>
を<form>下又は、<head></head>の中に書きます。
function calc(){}
と定義してやり、
var result = document.fm.elements[0].value;
で値を取得します。
<form>では"name"属性で値が取れますが、今回は
elements[0]
でelementsで値をとります。
document.fm.elements[2].value = Number(result) + Number(result2);
最後に足し算して"elements[2].value"として
<p>答 : <input type="number" value=""></p>
に表示させます。ここでは、Number(result)として文字列から数字に変換しています。
スクリプト全体は
<script>
function calc(){
var result = document.fm.elements[0].value;
var result2 = document.fm.elements[1].value;
document.fm.elements[2].value = Number(result) + Number(result2); }
</script>です。
"足し算"ボタンを押したら"10"と出ました。
この記事が気に入ったらサポートをしてみませんか？