超簡易電卓

3つテキストボックスに入力してボタン押すだけのページです。

getElementByIdメソッドで、（　）内に指定されたidを持つ要素を丸ごと取得する。
（getElementByIdの引数は変数でも代替可能）
（同じIDが同じドキュメント内に重複していた場合は、最初に合致した要素が取得される）


<html>
<head>
<title>Tutorial: Add and Multi</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

<h1>Tutorial: Add or Multi</h1>

<form action="/tutorial/addMulti/" method="get">
    <input type="text"  id="arg1"/>
    <input type="text"  id="arg2"/>
    <input type="text"  id="arg3"/>
    <input type="button" name="test"   value="足し算" onclick="OnButtonClickPlus();"/>
    <input type="button" name="test"   value="掛け算" onclick="OnButtonClickMulti();"/>
    <span id = "output">=結果</span>
</form>

<script type="text/javascript">
function OnButtonClickPlus() {

            //変数定義は基本的には、var 変数名;
            //innerTextで開始タグと終了タグの間の文字列（要素の内容＝コンテンツ）を取ってくる
            var outInnerText = document.getElementById("output").innerText;
            console.log(outInnerText);
            var outTextContent = document.getElementById("output").textContent;
            console.log(outTextContent);
            var outInnerHTML = document.getElementById("output").innerHTML;
            console.log(outInnerHTML);

            //document.getElementById("arg1").valueで、フォームの入力内容を読み取る
            var num1 = parseInt(document.getElementById("arg1").value);
            var num2 = parseInt(document.getElementById("arg2").value);
            var num3 = parseInt(document.getElementById("arg3").value);

            var result = num1 + num2 + num3;
            document.getElementById("output").textContent = result;
}

function OnButtonClickMulti() {

            var out = document.getElementById("output").innerText;
            console.log(out);

            var num1 = parseInt(document.getElementById("arg1").value);
            var num2 = parseInt(document.getElementById("arg2").value);
            var num3 = parseInt(document.getElementById("arg3").value);

            var result = num1 * num2 * num3;
            document.getElementById("output").textContent = result;
}
</script>

</body>
</html>

innerTextとinnerHTMLの違いは理解していますが、textContentとの違いはまだ良くわからず。
基本的には同じ働き、というざっくりしたイメージの現在です。とりあえず上記コードでは違いは発生しませんでした。

javascriptでは変数のデータ型が宣言時にvarで統一されているため、
データ型に関してはかなり緩いですが、緩過ぎて戸惑います。。。

※個人的メモ
JavaScript は動的型付け言語であるため、変数宣言時にデータ型を指定する必要がなく、またスクリプト実行時に必要に応じてデータ型が自動的に変換される。

Web超簡易電卓 HTML＋JavaScript

超簡易電卓