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

问题描述 投票:0回答:4

我想做一个在线计算器,我发现我可以使用HTML格式的表格,我制作了一些表格,但是没有什么问题,我需要从(input type =“ number” name =“ first number “)和(输入type =” number“ name =”第二个数字“),然后将它们放入脚本方程式中,然后在用户文件编号和结果提交时写入(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>
javascript html forms var equation
4个回答
1
投票

这是一个小示例,说明如何使用document.getElementById()中的input事件处理程序使用spanonclick元素读取并写入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>

0
投票

我不太了解您的问题,也不了​​解您要做什么。

但是,要获取输入字段的数据,您需要执行DOM访问:

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

您需要写回:

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

也许您应该先阅读javascript dom教程。例如,此Tutorial

最诚挚的问候

达斯汀


0
投票

我开发了一个简单的计算器,它利用Java Scrip eval。这种方法可能对您有帮助。

您可以在这里在线测试。

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>

0
投票

我认为您正在寻找使用JavaScript开发计算器的方法。我找到一个网站,您可以从中参考检查这里:https://mathfun.in/calculator.php

© www.soinside.com 2019 - 2024. All rights reserved.