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

来源：互联网发布：沈阳开盘数据恢复编辑：程序博客网时间：2024/06/06 02:02

innerHtml和string()/将数字转化为字符串
1.（一）和（二）的结果都是以alert形式弹出的
2.innerHTML可让结果直接显示在HTML页面上（上篇是通过alert弹出来的）
3.表示元素里面的HTML，可通过innerHTML在JS中改变页面上元素显示的内容
HTML内容

<!doctype html><html><body><form>第一个数字：<br><input type="text" id="num1" ><br>第二个数字：<br><input type="text" id="num2"><br>    <!--添加一个P元素-->  运算结果：<br>    <p id="result">结果将显示在这里</p>    <br></form>    <button id="add">+</button>    <button id="subtract">-</button>    <button id="multiply">*</button>    <button id="divide">÷</button>    </body></html>

JavaScript和innerHTML
这里写图片描述

//获取元素var addBtn=document.getElementById('add');var subtractBtn=document.getElementById('subtract');var multiplyBtn=document.getElementById('multiply');var divideBtn=document.getElementById('divide');var resultNum = document.getElementById('result');  //全局变量var a_int;var b_int;//点击方法addBtn.onclick=function(){getInputNum();var result=addition(a_int,b_int);resultNum.innerHTML=String(result);};subtractBtn.onclick=function(){getInputNum();var result=subtraction(a_int,b_int);resultNum.innerHTML=String(result);};multiplyBtn.onclick=function(){getInputNum();var result=multiplication(a_int,b_int);resultNum.innerHTML=String(result);};divideBtn.onclick=function(){getInputNum();var result=division(a_int,b_int);resultNum.innerHTML=String(result);};//函数方法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;}}

测试结果这里写图片描述
运行测试

阅读全文

0 0