How can I use text input as mathematical symbols?

Question

I want to make a form where the two first input fields accept numbers and the third one the symbol and then the result is calculated and shown as in the image. my goal

my code so far is:

<!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>

i just cant find a way to make the function accept symbols from Symbol input field. Do you guys have any suggestions, solutions.

thank you! PS: I am newbie in coding.

freedomn-m · Answer 1 · 2018-03-23T14:26:35.707

As a starting point, you could use a switch statement, eg:

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;
}

Working sample:

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);
  });
});

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;
}

<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>

As someone just starting out, I feel this will be your best approach. The accepted answer on the duplicate link is very clean approach, but not too obvious how/why it works when you're starting out - and you need to know about `switch` anyway. — freedomn-m, Mar 23 '18 at 14:50

How can I use text input as mathematical symbols?

1 Answers1