JS 简单的计算器实例内容获取 input value (值) ，button onclick 事件在JS中调用一个函数方法

本文链接：https://blog.youkuaiyun.com/haibin8473/article/details/111309656

本文介绍了如何使用JavaScript创建一个简单的计算器，通过获取input输入值和利用button的onclick事件调用函数进行计算操作。

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

<!-- 一个简单的 计算器 小实例  
	简单介绍	
		1.想要获取用户的内容  什么时候获取？
			 用户输入内容后? 还是 满足触发事件后	..比如:点击Button按钮获取	
		2. 如何在点击 button 后 获取 input标签text 的内容 
		3. 计算Number数据 需要转换 input 的值（是string）
			转换方式 parseFloat(),-0,parseInt (不能算小数)
		4. 判断 select  用户选择了 哪个值（判断语句不讲了，）
			条件 没有范围判断 switch 比较合适
		input			他的text 是string
        script 			什么都没干先执行特点 ，	
        button click    在 点击按钮事件 后才开始获取，加一个开关
        标签Id.value	  js通过var a = id.value  使用 必须是ID 
        (ID名).onclick = function(){代码}   第一种
        (ID名).onclick = fun()				第二种
        var fun = function (){ 代码}
        
	 -->
	 <body>
	<input type="text" id="frist">
	<select name="" id="type">
		<option value="+"></option>
		<option value="-"></option>
		<option value="*"></option>
		<option value="/"></option>
	</select>
	<input type="text" id="second"> 
	<button id="but">按钮 </button> 
	<input type="text" id="result">
</body>
	<script>
	//ID为but 的 onlcik 事件 执行一个方法
	//ID为frist的值  赋值 给 a
	//ID为cecond的值 赋值 给 b 变量
	 //ID为type 的值	赋值 给  t 变量
	 //准备一个变量 t  来存放计算结果
		but.onclick = function(){
			var a= parseFloat(frist.value )   变量
			var b= second.value -0  
			var t= type.value   
			
			var res 
			switch(t){
				 case '+': res = a + b; break
           		 case '-': res = a - b; break
           		 case '*': res = a * b; break
          		 case '/': res = a / b; break
			}
			//赋值
			result.value = res
		}
	</script>