Reference error document is not defined in javascript

Question

I am using bracket editor when I save the bill.js editor show some error at every document the desired output is not coming.

HTML code is

<!DOCTYPE html>
<html lang="en">
<head>
    <title>split Bill</title>
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <link rel="stylesheet" type="text/css" href="splitbill.css">
</head>

<body>
   <div id="container">
       <h1>Bill calculator</h1>
       <div id="calculator">
           <form>
               <label>
                   How Much your Bill ? <br>
            Rupees <input  type="text" id="billAmount">
               </label>
               <label>
                How was your Service sir?<br>
                <select id="serviceFeedback">
                    <option disabled selected value="0">
                        --Choose an option--
                    </option>
                    <option value="0.4">
                        40% -Very Good
                    </option>
                    <option value="0.3">
                        30% - Good
                    </option>
                    <option value="0.2">
                        20% - it was Ok
                    </option>
                    <option value="0.1">
                        10% - Bad
                    </option>
                    <option value="0.05">
                        5% - poor
                    </option>
                  </select>
               </label>
               <label>
                   How many people sharing the bill?<br>
                   <input type="text" id="totalpeople">
                   people
               </label>
               <button type="button" id="calculate">calculate!</button>
           </form>
       </div>
       <div id="totalTip">
           <sup>Rupees</sup><span id="tip">0.00 </span>
           <small id="each">each</small>
       </div>
   </div>

   <script type="text/javascript" src="bill.js"></script>

</body>
</html>

javascript is here I didn't get desired output at every document function there is error sign please tell me what I do I am using bracket editor. why I got this I am using at the end of HTML code

//create function
function calculateTip() {

    var billAmount = document.getElementById("billAmount").value;
    var serviceFeedback = document.getElementById("serviceFeedback").value;

    var numpeople =document.getElementById("totalpeople").value;

    //validation
    if (billAmount =="" ||serviceFeedback == 0) {

        window.alert("please enter some value Boss!");
        return;
    }

    //if input is empty
    if (numpeople =="" ||numpeople <= 1) {
        numpeople =1;
        document.getElementById("each").style.display ="none";


    } else {
        document.getElementById("each").style.display ="block";

    }

    var total = (billAmount * serviceFeedback) / numpeople;
    total = Math.round(total * 100) / 100;
    total = total.toFixed(2);

    //display the  tip
    document.getElementById("totalTip").style.display = "block";
    document.getElementById("tip").innerHTML = total;
}

// hide tip amount

document.getElementById("totalTip").style.display ="none";
document.getElementById("each").style.display ="none";

//clicking the button  calls our custom function

document.getElementById("calculate").onclick=function()
{
    calculateTip();
}

ERROR:'document' is not defined.[no-undef] at every document, there is a cross sign and output is not desirable. — pankaj jha
– pankaj jha, Commented Apr 6, 2018 at 15:27

D. Braun · Accepted Answer · 2018-04-09 07:55:25Z

2

In the function "calculateTip" I found the line:

if (billAmount =="" || ServiceFeedback == 0) {

Here ServiceFeedback starts with a capital letter instead of a lower case letter.

The selected option of a select-Field you get like that:

let selectElement = document.getElementById("serviceFeedback");
let serviceFeedback = selectElement.option[selectElement.selectedIndex].value;

In the html file I found an other problem:

<input type="text" id="totalpeople ">

There is a blank at the end of the id! Better would be:

<input type="text" id="totalpeople">

In the javascript file there is an other blank:

document.getElementById("each").style.display = " none";

Better would be:

document.getElementById("each").style.display = "none";

I hope that helps.

To ReferenceError: document is not defined I found that: ReferenceError: document is not defined (in plain JavaScript)

=> My questions are:

What does bill.js contain?
Where is calculateTip() called?
I mean: Is anywhere a call like that document.getElementsBy... before the document is created?

edited Apr 9, 2018 at 7:55

answered Apr 6, 2018 at 11:41

D. Braun

5081 gold badge4 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tubs Over a year ago

Eagle eye Braun

pankaj jha Over a year ago

Hey D. Braun thanks for the reply I resolved this but the problem is still not solve

D. Braun Over a year ago

@pankaj jha: I added something to my answer.

Collectives™ on Stack Overflow

Reference error document is not defined in javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related