document.getElementById.value not working

Question

私はフルーツの量を入力するための入力フィールドを持つhtmlページを持っています。キーの押下/キーアップでは、javascriptファイルメソッドを呼び出して、数字であるかどうかを確認します。数字でない場合、テキストボックスフィールドはクリアされます。しかし、数値以外の値を入力しようとすると、私のテキストボックスはクリアされません。私のコードに何か不足していますか？

Htmlの

    <div class="form-group "> 
         <label class="control-label " for="name"> Name </label> 
         <input class="form-control" id="name" name="name" type="text" /> <span class="help-block" id="hint_name"> Enter your name </span> 
        </div> 
        <div class="form-group "> 
         <label class="control-label" for="apple"> Apple (69cents) </label> 
         <input class="form-control form-control-input" id="apple" name="apple" type="text" autocomplete="off" onkeyup="isNumber(this,event)" /> <span class="help-block" id="hint_number"> Enter Qty </span> 
        </div> 
        <div class="form-group "> 
         <label class="control-label" for="orange"> Orange (59cents) </label> 
         <input class="form-control form-control-input" id="orange" name="orange" type="text" autocomplete="off" onkeyup="isNumber(this,event)" /> <span class="help-block" id="hint_number1"> Enter Qty </span> 
        </div> 
        <div class="form-group "> 
         <label class="control-label" for="banana"> Banana (39cents) </label> 
         <input class="form-control form-control-input" id="banana" name="banana" type="text" autocomplete="off" onkeyup="isNumber(this,event)" /> <span class="help-block" id="hint_number2"> Enter Qty </span> 
        </div> 

Javascriptを

function isNumber(idValue, evt) { 
    evt = (evt) ? evt : window.event; 
    var sum = 0; 
    var costOfApple = 0; 
    var costOfOrange = 0; 
    var costOfBanana = 0; 
    var charCode = (evt.which) ? evt.which : evt.keyCode; 
    if (charCode > 31 && (charCode < 48 || charCode > 57)) { 
     document.getElementById('idValue.id').value = ""; 
     document.getElementById('totalCost').value = "NaN"; 
     $("#invalid-alert").fadeTo(2000, 500).slideUp(500, function() { 
      $("#invalid-alert").slideUp(500); 
     }); 
    } else { 
     costOfApple = document.getElementById('apple').value * 69; 
     costOfOrange = document.getElementById('orange').value * 59; 
     costOfBanana = document.getElementById('banana').value * 39; 
     sum = (Number(costOfApple) + Number(costOfOrange) + Number(costOfBanana))/100; 
     document.getElementById('totalCost').value = "$" + (sum).toFixed(2); 
    } 
} 

Answer 1

問題文はIDがないとあなたが関数に文字列 'idValue.id' と要素を渡している

document.getElementById('idValue.id').value = ""; 

ですコードが機能していないため、ブラウザのコンソールにエラーが表示されているはずです。

idValueは、イベントハンドラを呼び出す要素を指します。そのプロパティを直接設定することができます。

idValue.value = "" 

Answer 2

私は

document.getElementById('idValue.id').value = "";

が

document.getElementById(idValue.id).value = "";

または

idValue.value = "";

べきであると考えます

とisNumber関数のconsole.dir(idValue)には良いです！

試験してください！

Answer 3

$(document).on('change', 'input', function() { 
    if($('#Id').val() == "") { 
     // Do something 
    } 
}); 

OR

document.getElementById(yourID).value = ""; 

Answer 4

あなたは、関数にこれを渡しているが、これはここにあなたがオブジェクトとしてではない、それを文字列として使用する必要があります入力されています。

はそれをしない：

document.getElementById('idValue.id').value = ""; 

は ""

document.getElementById(idValue.id).value = "";