javascript - document.getElementById.value not working - Stack Overflow

admin管理员组

文章数量:1351984

I have a html page that has input fields for the user to enter the quantity of fruits. On key press/ key up, it is suppose to call the javascript file method and checks if it is a digit. If it is not a digit, the textbox field will be cleared. However, my textbox is not cleared when i tried to enter a non numerical value. Is there something missing in my code?

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" autoplete="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" autoplete="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" autoplete="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);
    }
}

I have a html page that has input fields for the user to enter the quantity of fruits. On key press/ key up, it is suppose to call the javascript file method and checks if it is a digit. If it is not a digit, the textbox field will be cleared. However, my textbox is not cleared when i tried to enter a non numerical value. Is there something missing in my code?

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" autoplete="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" autoplete="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" autoplete="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);
    }
}

• javascript
• jquery
• html

Share Improve this question Follow asked Oct 30, 2017 at 6:56 Derrick PehDerrick Peh 30922 gold badges99 silver badges2020 bronze badges 1

• 1 document.getElementById(idValue.id).value = ""; – Agney Commented Oct 30, 2017 at 6:59

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Problem statement is

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

You are passing string 'idValue.id' to the function and the element with ID doesn't exists, thus the code is not working and you must be getting error in the browser console.

As idValue refers to element which invoke the event handler. You can just use it directly to set its property.

idValue.value = ""

I thinks

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

should be

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

or

idValue.value = "";

and , It's good to console.dir( idValue ) in isNumber function!

test please!

you are passing this to a function , and this is here the input you should use it as an object not as a string.

don’t do that :

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

try this instead

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

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

OR

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

本文标签： javascriptdocumentgetElementByIdvalue not workingStack Overflow