CODEWITHSUNDEEP
javascripthtmlformsvarequation
Rostislav Danko
Rostislav Danko

Reputation: 75

making online calculator using HTML and javascript

i want to make online calculator, i figured out, that i can use forms from HTML, i made some forms, but there is little problem, i need to take values from (input type="number" name="first number") and (input type="number" name="second number") and put them into script equation and then result write in (input type="text") when user file numbers and press submit button http://jsfiddle.net/nco5r74k/

<pre>
<!DOCTYPE html> 
<html lang="cs-CZ"> 
    <head>
        <meta charset="UTF-8">
        <meta name="generator" content="Prace"> 
        <title>kalkulačka</title> 
    </head> 
    <body>        
        <form>
        <label for="vypln_cislo1">zadej zde první číslo</label> <input type="number" name="prvni_cislo" min="0" max="10000">
        <select name="znamenko">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="x">x</option>
        <option value=":">:</option>
        </select>
        <label for="vypln_cislo2">zadej zde druhé číslo</label> <input type="number" name="druhe" min="0" max="10000">
        <input type="submit" value="vypočítat">
        <label for="vysledek">výsledek:</label> <input type="text" size="15" name="vysledek" readonly>
        </form>
        <script>
            var a, text;
            y =
            x = 
            a = y + x
            text = + a;
            document.write(text);
        </script>
        <script>
            var b, text;
            y =
            x = 
            b = y - x
            text = + b;
            document.write(text);
        </script>
        <script>
            var c, text;
            y =
            x = 
            c = y * x
            text = + c;
            document.write(text);
        </script>
        <script>
            var d, text;
            y = 
            x = 
            d = y / x
            text = + d;
            document.write(text);
        </script>
    </body> 
</html>
</pre>

Upvotes: 0

Views: 4305

Answers (3)

Syam Kumar
Syam Kumar

Reputation: 21

I have developed a simple calculator which makes use of Java Scrip eval.This approach might help you.

You can test it online here.

http://luckyalgo.blogspot.in/2014/12/calculator-using-java-script.html

<code>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    width: 130px;
}

#CLEAR {
    width: 150px;
}

button {
    width: 45px;
}
</style>
<script>
function myFunction(clickedId) {
    document.calc.result.value+=clickedId;
}
function Clear() {
    document.calc.result.value="";
}
function compute() {
    try{
    var inp=eval(document.calc.result.value);
    document.calc.result.value=inp;
    }catch(err){
            document.calc.result.value="Bad Input!!";
    }
}
</script>
</head>
<body>
    <form name="calc">
    <input type="text" name="result" readonly>
    </form>

<table >
  <tr>
    <td><button type="button" id="1" onclick="myFunction(this.id)">1</button></td>
    <td><button type="button" id="2" onclick="myFunction(this.id)">2</button></td>
    <td><button type="button" id="3" onclick="myFunction(this.id)">3</button></td>
  </tr>
  <tr>
    <td><button type="button" id="4" onclick="myFunction(this.id)">4</button></td>
    <td><button type="button" id="5" onclick="myFunction(this.id)">5</button></td>
    <td><button type="button" id="6" onclick="myFunction(this.id)">6</button></td>
  </tr>
  <tr>
    <td><button type="button" id="7" onclick="myFunction(this.id)">7</button></td>
    <td><button type="button" id="8" onclick="myFunction(this.id)">8</button></td>
    <td><button type="button" id="9" onclick="myFunction(this.id)">9</button></td>
  </tr>
  <tr>
    <td><button type="button" id="0" onclick="myFunction(this.id)">0</button></td>
    <td><button type="button" id="+" onclick="myFunction(this.id)">+</button></td>
    <td><button type="button" id="-" onclick="myFunction(this.id)">-</button></td>
  </tr>
  <tr>
    <td><button type="button" id="*" onclick="myFunction(this.id)">*</button></td>
    <td><button type="button" id="/" onclick="myFunction(this.id)">/</button></td>
    <td><button type="button" id="ANS" onclick="compute()">ANS</button></td>
  </tr>
</table>

<button type="button" id="CLEAR" onclick="Clear()">CLEAR</button>

</body></html>


</code>

Upvotes: 0

Dustin Hoffner
Dustin Hoffner

Reputation: 2135

I don't really understand your question nor what you are trying to do.

However, to get the data of your input field you need to perform a DOM access:

var druhe = document.getElementsByTagName('druhe')[0].value;

And you need to write it back by:

document.getElementsByTagName('vysledek')[0].value = "test1234";

Maybe you should first read a javascript dom tutorial. For example this Tutorial.

Best regards

Dustin

Upvotes: 0

Troy Gizzi
Troy Gizzi

Reputation: 2519

Here's a little example of how you can use document.getElementById() to read from input elements and write to a span element, using the onclick event handler from a button.

A: <input id="a" value="3"/><br/>
B: <input id="b" value="5"/><br/>
<button onclick="document.getElementById('product').innerText = document.getElementById('a').value * document.getElementById('b').value;">Calculate</button>
<br/>
A * B = <span id="product"></span>

Upvotes: 1

Related Questions