使用 HTML 和 javascript 制作在线计算器

Question

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/我想制作在线计算器，我发现我可以使用 HTML 中的表单，我制作了一些表单，但没什么问题，我需要从 (input type="number" name="first number") 中获取值和 (input type="number" name="second number") 并将它们放入脚本方程中，然后在用户文件编号时写入 (input type="text") 并按下提交按钮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>

Answer 1

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 .下面是一个小示例，说明如何使用document.getElementById()读取input元素并使用button的onclick事件处理程序写入span元素。

 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>

Answer 2

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:但是，要获取输入字段的数据，您需要执行 DOM 访问：

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.也许你应该先阅读一个 javascript dom 教程。 For example this Tutorial .例如本教程。

Best regards此致

Dustin达斯汀

Answer 3

I have developed a simple calculator which makes use of Java Scrip eval.This approach might help you.我开发了一个简单的计算器，它使用 Java Scrip eval。这种方法可能对你有帮助。

You can test it online here.你可以在这里在线测试。

http://luckyalgo.blogspot.in/2014/12/calculator-using-java-script.html 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>

使用 HTML 和 javascript 制作在线计算器

问题描述

3 个解决方案

解决方案1
1 已采纳 2014-10-11 16:45:37

解决方案2
0 2014-10-11 16:48:05

解决方案3
0 2015-01-01 12:06:34

使用 HTML 和 javascript 制作在线计算器

问题描述

3 个解决方案

解决方案1 1 已采纳 2014-10-11 16:45:37

解决方案2 0 2014-10-11 16:48:05

解决方案3 0 2015-01-01 12:06:34

解决方案1
1 已采纳 2014-10-11 16:45:37

解决方案2
0 2014-10-11 16:48:05

解决方案3
0 2015-01-01 12:06:34