计算器
如下图
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单击和双击事件</title>
</head>
<body>
<form action="#">
<input type="text">+
<input type="text">
<input type="submit" value="计算">
<span>结果是:<strong style="color:red"></strong></span>
</form>
<script>
//当提交表单的时候,获取两个input标签的值,然后想加,最后赋值给strong标签的文本值。
//获取input标签
let input = document.querySelectorAll("input");
//获取strong标签
let strong = document.querySelector("strong");
//将submit标签绑定单机事件
input[2].onclick = function() {
// value可以获取input输入的内容
//第一种方法,使用innerHTML嵌套内容
// strong.innerHTML = parseFloat(input[0].value)+parseFloat(input[1].value);
//第二种方法,使用createTextNode嵌套
let c = parseFloat(input[0].value)+parseFloat(input[1].value)
let text=document.createTextNode(c);
strong.appendChild(text);
}
</script>
</body>
</html>