html&JavaScript演练（计算器）：获取HTML内容、函数、按钮(二）

本文链接：https://blog.csdn.net/psyche_knight/article/details/76163984

HTML内容
定义了四个按钮，分别代表加减乘除

<!doctype html>
<html>
<body>

<form>
第一个数字：<br>
<input type="text" id="num1" >
<br>
第二个数字：<br>
<input type="text" id="num2">
<br>
</form>

    <button id="add">/</button>
    <button id="subtract">-</button>
    <button id="multiply">*</button>
    <button id="divide">÷</button>

    </body>

</html>

JavaScript
全局变量：定义在函数外，整个JS文件可用
局部变量：只有函数内部可以使用
1.获取四个按钮
2.编写加减乘除函数
3.每个按钮都设置点击方法，调用对应的函数
关于获取点击按钮
在分别为加减乘除按钮获取的时候，，都是获取输入框的值，然后转化为数字，4个按钮会重复4次相同的代码，这时需要将这4行相同的代码写成一个函数，每个事件中调用一次。
var a=document.getElementById(‘num1’).value;
var b=document.getElemntById(‘num2’).value;

var a_int=parseInt(a,10);
var b_int=parseInt(b,10);

//获取按钮
var addBtn=document.getElementById('add');
var subtractBtn=document.getElementById('subtract');
var multiplyBtn=document.getElementById('multiply');
var divideBtn=document.getElementById('divide');
//定义两个全局变量
var a_int;
var b_int;
//为按钮添加点击方法
addBtn.onclick=function(){
getInputNum();
var result=addition(a_int,b_int);
alert(result);
};

subtractBtn.onclick=function(){
getInputNum();
var result=subtraction(a_int,b_int);
alert(result);
};

multiplyBtn.onclick=function(){
getInputNum();
var result=multiplication(a_int,b_int);
alert(result);
};

divideBtn.onclick=function(){
getInputNum();
var result=division(a_int,b_int);
alert(result);
};

//获取input的值并转化为数字的函数
function getInputNum(){
//这里是局部变量
var a=document.getElementById('num1').value;
var b=document.getElementById('num2').value;
//将转化后的值赋给全局变量
a_int=parseInt(a,10);
b_int=parseInt(b,10);
}
//加减乘除函数
function addition(x,y){
return x+y;
}
function subtraction(x,y){
return x-y;
}
function multiplication(x,y){
return x*y;
}
function division(x,y){
if(y==0){
alert('0不能做除数');
return;}
else{
return x/y;}
}