使用 HTML 和 javascript 制作在線計算器
[英]making online calculator using HTML and javascript
問題描述
我想制作在線計算器，我發現我可以使用 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>
3 個解決方案
解決方案1
1 已采納 2014-10-11 16:45:37
下面是一個小示例，說明如何使用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>
解決方案2
0 2014-10-11 16:48:05
我不太明白你的問題，也不明白你想做什么。
但是，要獲取輸入字段的數據，您需要執行 DOM 訪問：
var druhe = document.getElementsByTagName('druhe')[0].value;
您需要通過以下方式將其寫回：
document.getElementsByTagName('vysledek')[0].value = "test1234";
也許你應該先閱讀一個 javascript dom 教程。 例如本教程。
此致
達斯汀
解決方案3
0 2015-01-01 12:06:34
我開發了一個簡單的計算器，它使用 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>
使用 HTML 和 Javascript 編寫多運算計算器
[英]Coding a multiple operation calculator in using HTML and Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.