JavaScript中getElementById()方法和getElementByName()方法

最新推荐文章于 2025-02-24 23:03:33 发布

Mint___

最新推荐文章于 2025-02-24 23:03:33 发布

阅读量1.3w

点赞数 7

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/Mint___/article/details/79858705

版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个简单的HTML页面结合JavaScript实现的基本计算器功能。通过getElementById方法获取输入框的值，并使用switch语句进行加减乘除运算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

getElementById()

作用：根据指定的ID值获取对象，如果无符合条件的对象，则返回 null

用法：var 变量名= document . getElementsById( 'id名')

getElementByName()

作用：返回带有指定名称的对象的集合

用法：var 变量名= document . getElementsByName( 'name名')

区别：getElementByName()取单个元素

getElementByName()取元素集合

计算器

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//调用js
function js(jisuan){
//获得第一第二文本框的值
var one = document.getElementById("first").value;
var two = document.getElementById("second").value;
//转换为数值型
one = Number(one);
two = Number(two);
//定义结果
var jg = 0;
switch (jisuan.value){
//计算
case '+':
jg=one+two;
break;
case '-':
jg=one-two;
break;
case '*':
jg=one*two;
break;
case '/':
jg=one/two;
break;
}
//将结果给文本框3
document.getElementById("third").value=jg;
}
</script>
</head>
<body>
<table border="2">
<tr>
<td colspan="3" align="center">计算器</td>
</tr>
<tr>
<td>第一个数</td>
<td><input type="text" id="first"></td>
<td><input type="button" name="jia" value="+" οnclick="js(this)"></td>
</tr>
<tr>
<td>第二个数</td>
<td><input type="text" id="second"></td>
<td><input type="button" name="jian" value="-" οnclick="js(this)"></td>
</tr>
<tr>
<td>结果</td>
<td><input type="text" id="third"></td>
<td><input type="button" name="cheng" value="*" οnclick="js(this)"></td>
</tr>
<tr>
<td colspan="2">运算方法：先两个数，再选择算法</td>
<td><input type="button" name="chu" value="/" οnclick="js(this)"></td>
</tr>
</body>

</html>