<input type='number' id='number1'/>
これは、後でそれらを操作するために数値を入力するところです(追加など)。私はその部分を隠してしまったが、<span id='total'></span>
に保存されている合計を削除するようにこれを拡張したいと思っていた。いつでも新しいものが<input/>
に書き込まれた。 まず、addEventListener('input', function());
を試しましたが、それは登録されていない入力に対しても機能します。だから、<input type='number'/>
を 'abcd'などに書いても何も変わらないが、合計はクリーニングされるので、'input' event listener
がトリガーされる。だから私はいくつかの掘り出しを行って、ValueChangeイベントリスナーを見つけましたが、私はそれを働かせることができません(しかし、input
の値は明らかに変わります)。ValueChangeイベントの入力
ちょうど正直言って、私は解決策を確認しましたが、回答はjQueryまたはいくつかの回避策に関するものです。
コード:私が正しく理解していれば
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Kalkulator-JS</title>
<script>
function operation(x) {
var typeOfOp = x;
var n1 = document.getElementById('number1').value;
var n2 = document.getElementById('number2').value;
var total = '';
console.log('Type of operation: ' + typeOfOp);
console.log('Number 1: ' + n1);
console.log('Number 2: ' + n2);
if (isNumber(n1)==false || isNumber(n2)==false) {
alert('Input right data');
return false;
}
n1 = Number(n1);
n2 = Number(n2);
switch (typeOfOp) {
case '+':
total = (n1 + n2);
break;
case '-':
total = (n1 - n2);
break;
case '*':
total = (n1 * n2);
break;
case '/':
if (n2 == 0) {
alert("You can't divide by 0!!!");
czysczenie();
return false;
}
total = (n1/n2);
}
document.getElementById('total').innerHTML = total;
}
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function cleanup() {
document.getElementById('total').innerHTML = '';
}
document.addEventListener('DOMContentLoaded', function() {
var sum = document.getElementById('sum');
var subtract = document.getElementById('subtract');
var multiply = document.getElementById('multiply');
var divide = document.getElementById('divide');
sum.addEventListener('click', function() {
operation(sum.value);
});
subtract.addEventListener('click', function() {
operation(subtract.value);
});
multiply.addEventListener('click', function() {
operation(multiply.value);
});
divide.addEventListener('click', function() {
operation(divide.value);
});
document.getElementById('number1').addEventListener('input', function() {
cleanup();
});
});
</script>
</head>
<body>
<table>
<tr>
<td>Number 1</td>
<td>Number2</td>
</tr>
<tr>
<td><input type='number' id='number1'/></td>
<td><input type='number' id='number2'/></td>
</tr>
</table>
<input type='button' id='sum' value='+'/>
<input type='button' id='subtract' value='-'/>
<input type='button' id='multiply' value='*'/>
<input type='button' id='divide' value='/'/>
<div id='text'>
Total: <span id='total'></span>
</div>
</body>
</html>
コードはどこですか? – superUser
'ValueChanged':"仕様:XUL ".'input'を代わりに使うべきです。コードを 'input'イベント、post____で詳細に説明してください。 – Teemu
@suzoそのペーストビンのリンク。 –