2017-01-13 3 views
0
<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> 
+0

コードはどこですか? – superUser

+0

'ValueChanged':"仕様:XUL ".'input'を代わりに使うべきです。コードを 'input'イベント、post____で詳細に説明してください。 – Teemu

+0

@suzoそのペーストビンのリンク。 –

答えて

0

SOLUTION、@Teemuと@imtheman間の議論のおかげで、おかげでたくさんのみんな!

<!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('keydown', function(e) { 
        if (isNumber(e.key)) { 
         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> 

説明:

  1. それへの私の最初の一口、それはXUL(それはまだ何であるか知らないが、それは無用だ)だから、とvalueChangeは、無意味です、お奨め使用何かDOM関連の
  2. I (keydown/input)を試したが、結果をフィルタリングするイベントリスナーの1つを使用しなければならない
  3. オブジェクトを使用するのが悪く、keydownイベントオブジェクトは入力よりもはるかに理解しやすい(はるかに単純です)
  4. e.key(またはevent.key)は私にイベントのキープロパティの値を与えます
  5. これで、押されたキーが数字かどうかを検証する必要があります。
  6. Number()のような空のスロットは0と等しいので、Number()のinbuilt関数を使用することはできません。
  7. したがって、私自身の関数isNumberを作成します。そしてボイルラ。
0

、私が何をしたいことはaddEventListener('keydown', function())であると考えています。そのような:

document.getElementById('liczba1').addEventListener('keydown', function(e) { 
    if(e.which >= 48 && e.which <= 57) //if 0-9 is pressed 
     czyszczenie(); 
}); 

説明:

Eventオブジェクトはあなたに発生したイベントについての情報を与える関数に渡されるイベント・リスナーを使用しました。この場合、​​イベントオブジェクトには、どのキーが押されたかに関する情報があります。

完全なコード例:

function dzialanie(x) { 
 
    var typDzialania = x; 
 
    var n1 = document.getElementById('liczba1').value; 
 
    var n2 = document.getElementById('liczba2').value; 
 
    var wynik = ''; 
 
    console.log('Typ dzialania: ' + typDzialania); 
 
    console.log('Liczba 1: ' + n1); 
 
    console.log('Liczba 2: ' + n2); 
 

 
    if (isNumber(n1) == false || isNumber(n2) == false) { 
 
    alert('Wprowadź poprawne dane'); 
 
    return false; 
 
    } 
 
    n1 = Number(n1); 
 
    n2 = Number(n2); 
 

 
    switch (typDzialania) { 
 
    case '+': 
 
     wynik = (n1 + n2); 
 
     break; 
 
    case '-': 
 
     wynik = (n1 - n2); 
 
     break; 
 
    case '*': 
 
     wynik = (n1 * n2); 
 
     break; 
 
    case '/': 
 
     if (n2 == 0) { 
 
     alert('Nie dziel przez 0!!!'); 
 
     czysczenie(); 
 
     return false; 
 
     } 
 
     wynik = (n1/n2); 
 
    } 
 
    document.getElementById('wynik').innerHTML = wynik; 
 
} 
 

 
function isNumber(n) { 
 
    return !isNaN(parseFloat(n)) && isFinite(n); 
 
} 
 

 
function czyszczenie() { 
 
    document.getElementById('wynik').innerHTML = ''; 
 
} 
 

 
document.addEventListener('DOMContentLoaded', function() { 
 
    var dodawanie = document.getElementById('dodawanie'); 
 
    var odejmowanie = document.getElementById('odejmowanie'); 
 
    var mnozenie = document.getElementById('mnozenie'); 
 
    var dzielenie = document.getElementById('dzielenie'); 
 
    dodawanie.addEventListener('click', function() { 
 
    dzialanie(dodawanie.value); 
 
    }); 
 
    odejmowanie.addEventListener('click', function() { 
 
    dzialanie(odejmowanie.value); 
 
    }); 
 
    mnozenie.addEventListener('click', function() { 
 
    dzialanie(mnozenie.value); 
 
    }); 
 
    dzielenie.addEventListener('click', function() { 
 
    dzialanie(dzielenie.value); 
 
    }); 
 
    document.getElementById('liczba1').addEventListener('keydown', function(e) { 
 
    if(e.which >= 48 && e.which <= 57) //if 0-9 is pressed 
 
     czyszczenie(); 
 
    }); 
 
    document.getElementById('liczba2').addEventListener('keydown', function(e) { 
 
    if(e.which >= 48 && e.which <= 57) //if 0-9 is pressed 
 
     czyszczenie(); 
 
    }); 
 
});
<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <table> 
 

 
    <tr> 
 
     <td>Liczba 1</td> 
 
     <td>Liczba 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type='number' id='liczba1' /> 
 
     </td> 
 
     <td> 
 
     <input type='number' id='liczba2' /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <input type='button' id='dodawanie' value='+' /> 
 
    <input type='button' id='odejmowanie' value='-' /> 
 
    <input type='button' id='mnozenie' value='*' /> 
 
    <input type='button' id='dzielenie' value='/' /> 
 
    <div id='tekst'> 
 
    Wynik: <span id='wynik'></span> 
 
    </div> 
 
</body> 
 

 
</html>

+0

ここで 'which'に頼ることはできません。これは単なるキーボードのキーマッピングコードであり、キーボードによって異なる場合があります。 – Teemu

+0

@Teemu非永久リンクを再度ご利用いただきまして申し訳ありません:http://i.imgur.com/WvPNlgm.png「キー」の価値を取得し、番号であることを確認できますか? – Irevall

+0

@アイオワルいいえ、ティームは間違っています。 http://stackoverflow.com/questions/4471582/javascript-keycode-vs-which – imtheman

関連する問題