CODEWITHSUNDEEP
javascripthtml
pankaj jha
pankaj jha

Reputation: 49

Reference error document is not defined in javascript

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

Upvotes: 1

Views: 3201

Answers (1)

D. Braun
D. Braun

Reputation: 508

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:

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

Upvotes: 2

Related Questions