Q&A
「keisan.js」を質問文に追記してください。
###前提・実現したいこと
現在、足し算ができるプログラムを考えています。
それをhtmlとjsの2つのファイルで作っています。
htmlのファイルは下記の通りです。
###該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf8"> <title>計算</title> <script src="keisan.js"></script> </head> <body> <p> <input id="1" type="text" size="4"></input> + <input id="2" type="text" size="4"></input> <button id="keisan">計算</button><br> 計算結果：<span id="kekka"></span> </p> </body> </html>
そして、これに基づいて、javascriptで足し算プログラムを作りたかったのですが、構成がわかりませんでした。
初心者なため、おかしな点が多々あると思いますが、分かる方がいらっしゃいましたら、ご教示のほどお願いいたします。
回答2件
0
ベストアンサー
keisan.jsの中身はこんな感じでしょうか。
JavaScript
1// <head>タグに<script>タグを書いた場合そのタイミングではまだHTMLタグに対応するオブジェクトができていないので、 2// ページの読み込みが完了するまで待つ 3window.addEventListener('load', function () { 4 var id1 = document.getElementById('1'); // <input id="1">を取得 5 var id2 = document.getElementById('2'); // <input id="2">を取得 6 var keisan = document.getElementById('keisan'); // <button id="keisan">を取得 7 var kekka = document.getElementById('kekka'); // <span id="kekka">を取得 8 9 // <button id="keisan">がクリックされたときの動作を指定 10 keisan.addEventListener('click', function () { 11 var val1 = parseInt(id1.value, 10); // <input id="1">に入力された文字列を数値として取得 12 var val2 = parseInt(id2.value, 10); // <input id="2">に入力された文字列を数値として取得 13 kekka.innerHTML = val1 + val2; // 二つの値を足した結果を、<span id="kekka">に表示 14 }); 15});
この中で使っている関数やメソッドについて説明していきます。
document.getElementByIdは、HTML中で指定したid属性の値から、その要素に対応するJavaScriptのオブジェクトを取得する関数です。
参考： document.getElementById - Web API インターフェイス | MDN
addEventListenerはそうして取得したオブジェクトにあるメソッドで、要素に対してあるイベントが発生したときの動作を指定することができます。第一引数にイベント名を、第二引数にその際に実行する動作となる関数を指定します。
参考： EventTarget.addEventListener - Web API インターフェイス | MDN
id1.valueやid2.valueは、要素に入力された値を表す文字列が格納されています。
parseIntは引数として渡された文字列を数値に変換します。第二引数は基数を表します。
参考： parseInt() - JavaScript | MDN
innerHTMLは要素の内側にあるHTMLを文字列で格納しています。逆に代入することでHTMLの内容を書き変えることができます。
追記：
コメントで+/-を切り替えられるようにしたいとのことなので、その場合keisan.jsは、
JavaScript
1// <head>タグに<script>タグを書いた場合そのタイミングではまだHTMLタグに対応するオブジェクトができていないので、 2// ページの読み込みが完了するまで待つ 3window.addEventListener('load', function () { 4 var id1 = document.getElementById('1'); // <input id="1">を取得 5 var id2 = document.getElementById('2'); // <input id="2">を取得 6 var houhou = document.getElementById('houhou'); // <select id="houhou">を取得 7 var keisan = document.getElementById('keisan'); // <button id="keisan">を取得 8 var kekka = document.getElementById('kekka'); // <span id="kekka">を取得 9 10 // <button id="keisan">がクリックされたときの動作を指定 11 keisan.addEventListener('click', function () { 12 var val1 = parseInt(id1.value, 10); // <input id="1">に入力された文字列を数値として取得 13 var val2 = parseInt(id2.value, 10); // <input id="2">に入力された文字列を数値として取得 14 kekka.innerHTML = houhou.value === '+' ? val1 + val2 : val1 - val2; // 二つの値を計算した結果を、<span id="kekka">に表示 15 }); 16});
となります。
投稿2016/11/04 02:40
編集2016/11/04 03:45
総合スコア545
keisan.jsがheadとbodyで2回呼び出されていますよ。
直しておきます
わかりすい解説ありがとうございます。
もし仮に
<p>
<input id="1" type="text" size="4"></input>
<select id="houhou">
<option>+</option>
<option>-</option>
<input id="2" type="text" size="4"></input>
<button id="keisan">計算</button>
計算結果：<span id="kekka"></span>
</p>
のようにhtmlファイルを変え、+と-の計算をできるようにしたいとすれば、javascriptの中身はどのように変えれば良いのですか？
document.getElementById('houhou')として<select id="houhou">を取得して、そのvalueを見て分岐するようになると思います。
回答の方に追記しておきました
よくわかりました。
本当にありがとうございます。
これから、+-だけでなく、この計算を応用していきたいと思います。
改めて、本当にありがとうございました。
0
inputを分かりやすく
html
1<input type="text" size="4" id="input1"> 2+ 3<input type="text" size="4" id="input2">
にして、
javascript
1$("#keisan").on('click', function() { 2 var input1 = $('#input1').val(); 3 var input2 = $('#input2').val(); 4 var result = parseInt(input1) + parseInt(input2); 5 $('#kekka').html(result); 6});
jQuery使いますけど、これでいけませんか？
投稿2016/11/04 02:37
編集2016/11/04 02:48
総合スコア686
あなたの回答
tips
プレビュー
