[解決済み] document.getElementById.valueが動作しない。

質問

ある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>

ジャバスクリプト

 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);
    }
}

解決方法は？

問題文は

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

関数に文字列 'idValue.id' を渡していますが、ID を持つ要素が存在しないため、コードは動作せず、ブラウザのコンソールにエラーが表示されるのでしょう。

として idValue は、イベントハンドラを呼び出す要素を指します。これを直接使って、プロパティを設定すればよい。

idValue.value = ""