Question

我想创建一个表单，其中两个第一个输入字段接受数字，第三个输入字段接受符号，然后计算结果并显示在图像中。 my goal

到目前为止，我的代码是：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style>
form {
	background-color:cyan;
	border:solid 1px blue;	
	padding:2px;
	width:500px;
	}
#lf{
	background-color:#ccc;
	border:solid 3px black;
	padding:4px;
	}	
form td { background-color:cyan;	 
	font-family:"Courier New", Courier, monospace;
	}	
#resultSt{
	color:#C00;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bolder;
	animation:ease-in;
	}
</style>


<script>
			var $original = null;

			$(document).ready(function(){
				$("p").keyup(function(){
					var a=$("#1").val();
					var b=$("#2").val();
					var c=$("#3").val();
					var d=addnumbers(a,b);
					$("span").append(d);
					
					if(d>5){					
						$("span").css({"color":"green"});
						$("span").css({"font-weight":"bold"});
					}
					else{
						$("span").css({"color":"red"});
						$("span").css({"font-weight":"bold"});
					}	
				});
				$("p").mouseout(function(){
					$("span").html($original);
				});
				
				function addnumbers(a,b){
					var c=Number(a)+Number(b);
					return c;
				}
			});
		</script>
</head>

<body>

<section>

<article>

<form>
<table >
<tr>
<td>First Number:</td>
<td><input type="number" id="1" name="first" size="30" required="required" ></td>
</tr>
<tr>
<td>Second Number:</td>
<td><input type="number" id="2" name="second" size="30" required="required"  ></td>
</tr>
<tr>
<td>Symbol:</td>
<td> <label for="symbol"></i>
</label>
 <input name="symbol" id="3" pattern="[+ - * / ]">
 </td>
</tr>
<tr>
<td>Result is:</td>
<td><input type="text" name="city" size="30" ></td>
</tr>

</table> <br />
<input type="submit" value="submit" id="sb">
</form>

</article>

</section>


</body>
</html>

我无法找到一种方法使函数接受符号输入字段中的符号。你们有什么建议，解决方案吗？

谢谢你！ PS：我是编码的新手。

Answer 1

作为起点，您可以使用switch语句，例如：

var a=$("#1").val() * 1;  // *1 gets the value and ensures it's a number
var b=$("#2").val() * 1;
var op=$("#3").val();     // get the operation 
var d;

// equivalent of:  if (op == "+") .. else if (op == "-") 
switch (op) {
    case "+": d=a+b; break;
    case "-": d=a-b; break;
    case "*": d=a*b; break;
    default: alert("unrecognised operation"); break;
}

工作样本：

＆＃13;

var $original = null;

$(document).ready(function() {
  $("input").keyup(function() {
    var a = $("#1").val() * 1;
    var b = $("#2").val() * 1;
    var c = $("#3").val();
    var op = $("#3").val();
    var d;
    switch (op) {
      case "+":
        d = a + b;
        break;
      case "-":
        d = a - b;
        break;
      case "*":
        d = a * b;
        break;
      default:
        d = "unrecognised operation";
        break;
    }
    $("span").text(d);
  });
});

＆＃13;

form {
  background-color: cyan;
  border: solid 1px blue;
  padding: 2px;
  width: 500px;
}

#lf {
  background-color: #ccc;
  border: solid 3px black;
  padding: 4px;
}

form td {
  background-color: cyan;
  font-family: "Courier New", Courier, monospace;
}

#resultSt {
  color: #C00;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-weight: bolder;
  animation: ease-in;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</style>

<table>
  <tr>
    <td>First Number:</td>
    <td><input type="number" id="1" name="first" size="30" required="required"></td>
  </tr>
  <tr>
    <td>Second Number:</td>
    <td><input type="number" id="2" name="second" size="30" required="required"></td>
  </tr>
  <tr>
    <td>Symbol:</td>
    <td>
      <input name="symbol" id="3" pattern="[+ - * / ]">
    </td>
  </tr>
  <tr>
    <td>Result is:</td>
    <td><span><span></td>
  </tr>

</table>

＆＃13;

如何将文本输入用作数学符号？

1 个答案: