求助query

980041382 发表于 2021-9-27 20:41

本帖最后由 980041382 于 2021-9-28 08:43 编辑

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
</head>
<style>
body{
   border: 2px #00FFFF;
}
</style>
<body>
<p>
<h1>请输入两个数并进行计算</h1>
<input type="text" id="num1" width="50px" />
<select id="select">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="num2" width="50px"/>
<input type="button" value="计算">
<input id="result"></input>
</p>
</body>
<script type="text/javascript">
function cal(){
   var num1=document.getElementById("num1").value;
   var num2=document.getElementById("num2").value;
   var c = document.getElementById("select").value;
   num1=parseFloat(num1);
   num2=parseFloat(num2);
   switch(c){
         case "+":
            document.getElementById("result").value=parseInt(num1)+parseInt(num2);
            break;
         case "-":
            document.getElementById("result").value=parseInt(num1)-parseInt(num2);
            break;
         case "*":
            document.getElementById("result").value=parseInt(num1)-parseInt(num2);
            break;
         case "/":
            document.getElementById("result").value=parseInt(num1)/parseInt(num2);
            break;
   }
}
</script>
</html>

这是我写的一个计算器想问一下坛友们如果用JQuery实现需要怎么修改

徒想er 发表于 2021-9-27 20:56

document.getElementById("result").value
这种代码，全部换成$('#result').val()
其他没差了

980041382 发表于 2021-9-27 22:05

徒想er 发表于 2021-9-27 20:56
这种代码，全部 ...
是dom对象都要换吗

980041382 发表于 2021-9-27 22:17

徒想er 发表于 2021-9-27 20:56
这种代码，全部 ...

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
</head>
<style>
body{
   border: 2px #00FFFF;
}
</style>
<body>
<p>
<h1>请输入两个数并进行计算</h1>
<input type="text" id="num1" width="50px" />
<select id="select">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="num2" width="50px"/>
<input type="button" value="计算" onclick="cal()">
<input id="result"></input>
</p>
</body>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">
function cal(){
   var num1=$('#num1').val();
   var num2=$('#num2').val();
   var c = $('#select').val();
   num1=parseFloat(num1);
   num2=parseFloat(num2);
   switch(c){
         case "+":
            $('#result').val(parseInt(num1)+parseInt(num2))
            break;
         case "-":
            $('#result').val(parseInt(num1)-parseInt(num2))
            break;
         case "*":
            $('#result').val(parseInt(num1)-parseInt(num2))
            break;
         case "/":
            $('#result').val(parseInt(num1)/parseInt(num2))
            break;
   }
}
</script>
</html>
为什么我全部修改后输出框没有反应呀

Jack2002 发表于 2021-9-27 23:02

本帖最后由 Jack2002 于 2021-9-27 23:03 编辑

基础语法都不及格。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<style>
body{
   border: 2px #00FFFF;
}
</style>
<body>
<p>
<h1>请输入两个数并进行计算</h1>
<input type="text" id="num1" width="50px" />
<select id="select">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="num2" width="50px"/>
<input type="button" value="计算">
<input id="result"></input>
</p>
</body>
<script type="text/javascript">
function cal(){
   var num1=$('#num1').val();
   var num2=$('#num2').val();
   var c = $('#select').val();
   num1=parseFloat(num1);
   num2=parseFloat(num2);
   switch(c){
         case "+":
            $('#result').val(parseInt(num1)+parseInt(num2))
            break;
         case "-":
            $('#result').val(parseInt(num1)-parseInt(num2))
            break;
         case "*":
            $('#result').val(parseInt(num1)*parseInt(num2))
            break;
         case "/":
            $('#result').val(parseInt(num1)/parseInt(num2))
            break;
   }
}
</script>
</html>

u1024i 发表于 2021-9-27 23:06

jq这样引入
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>

function cal(){
   var num1=$('#num1').val();
   var num2=$('#num2').val();
   var c = $('#select').val();
   num1=parseFloat(num1);
   num2=parseFloat(num2);
   switch(c){
         case "+":
            $('#result').val(parseInt(num1)+parseInt(num2))
            break;
         case "-":
            $('#result').val(parseInt(num1)-parseInt(num2))
            break;
         case "*":
            $('#result').val(parseInt(num1)-parseInt(num2))
            break;
         case "/":
            $('#result').val(parseInt(num1)/parseInt(num2))
            break;
   }
}
</script>

980041382 发表于 2021-9-27 23:07

Jack2002 发表于 2021-9-27 23:02
基础语法都不及格。

{:301_995:}我确实是初学还在预习Jquery，你这个代码就把js引入jquery多弄出来了一行还是运行不了啊

980041382 发表于 2021-9-27 23:08

u1024i 发表于 2021-9-27 23:06
jq这样引入

{:301_999:}学习群的小伙伴刚才提醒我了。。。

Jack2002 发表于 2021-9-27 23:10

980041382 发表于 2021-9-27 23:07
我确实是初学还在预习Jquery，你这个代码就把js引入jquery多弄出来了一行还是运行不了啊

制完整代码啊！我这儿正儿八经测试过的你说不行？

980041382 发表于 2021-9-27 23:11

Jack2002 发表于 2021-9-27 23:10
制完整代码啊！我这儿正儿八经测试过的你说不行？

{:301_999:}是复制完整代码啊。。。确实是不行啊

页: [1] 2 3 4

吾爱破解 - 52pojie.cn's Archiver

求助query