Web電卓の作成～プログラミング学習

2024年2月1日

この記事では、HTML、JavaScriptを利用してシンプルなWeb電卓を作成する方法を学習、紹介します。

まずshowResult関数に関して、numをbox要素にテキストコンテンツとして表示するものとして定義します。

const showResult=(num)=>{
box.textContent=num;
};

次に、buttonAddがクリックされた時、getNum1( )とgetNum2( )の値を足して、その結果をreult変数に格納します。

result変数に格納した値（足し算の結果）を引数として、showResult関数を呼び出します。

buttonAdd.addEventListener('click',( )=>{
const reslut=getNum1( )+getNum2( );
showResult(result);
});

最初に記述した

const showResult=(num)=>{
box.textContent=num;
};

では、showResult関数はあくまでもnumをbox要素にテキストコンテンツとして表示するものとして定義していました。

ところが今回、足し算の結果を引数として、showResult関数を呼び出したため、引数として受け取った足し算の値をbox要素に表示させることができます。

未経験から自身のwebサイト作成を持ちたい方は、参考にご覧ください。

学習経験から、３～5回は繰り返せば、理解8～９割、記述6～8割の習得は目指せるはずです。

【JavaScript】

const buttonAdd=document.getElementById('button-add');

const getNum1=( )=>{
const num1=document.getElementById('num1');
return Number.parseFloat(num1.value);
};

const getNum2=( )=>{
const num2=document.getElementById('num2');
return Number.parseFloat(num2.value);
};

const showResult=(num)=>{
box.textContent=num;
};

buttonAdd.addEventListner('click',( )=>{
const result=getNum( ) +getNum2( ) ;
showResult(result);
});