Javascript -> Uncaught ReferenceError - 'blank()' is not defined, yet it clearly is

Question

Error occurs when clicking submit or remove last bid, and the error refers to addBid() and removeBid(), respectively. My variable are global in the .js file, and I am exhausted, frustrated, and unable to see the issue.

<!DOCTYPE html>
<html>

   <head>
      <meta charset="UTF-8" />
      <title>Auction Log</title>
      <script src="modernizr-1.5.js"></script>

      <link href="ahstyles.css" rel="stylesheet" type="text/css" />
      <script src="bids.js" type="text/javascript"></script>


   </head>

   <body>
      <form name="bidForm" id="bidForm">

         <header>
            <img src="logo.jpg" alt="Schmitt Auction Haus" />
            <nav class="horizontal">
               <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Auctions</a></li>
                  <li><a href="#">Features</a></li>
                  <li><a href="#">Schedule</a></li>
                  <li><a href="#">Contacts</a></li>
               </ul>
            </nav>
         </header>

        <section id="intro">
           <h1>Silent Auction</h1>
           <h2>Tawney Farm</h2>

           <table id="summarytable">
              <tr>
                 <th>Lot #121</th>
                 <td>TurfTuff Lawn Tractor X24 (2015)</td>
              </tr>
              <tr>
                 <th>Latest Bid</th>
                 <td>
                    <input id="latestBid" name="latestBid" readonly="readonly" />
                 </td>
              </tr>
              <tr>
                 <th>Bidding Ends</th>
                 <td>15:00</td>
              </tr>
           </table>

           <table id="newbidtable">
              <tr>
                 <th colspan="2" id="newtitle">Enter New Bid</th>
              </tr>
              <tr>
                 <th>Bidder ID</th>
                 <td>
                    <input id="bidId" name="bidId" />
                 </td>
              </tr>
              <tr>
                 <th>Bid Amount</th>
                 <td>
                    <input id="bidAmount" name="bidAmount" />
                 </td>
              </tr>
              <tr>
                 <th id="buttons" colspan="2">
                    <input type="button" value="Submit" onclick="addBid()" />
                    <input type="button" value="Remove Last Bid" onclick="removeBid()" />
                 </th>
              </tr>
           </table>

        </section>

        <section id="bidHistory">
           <h1>Bid History</h1>
           <textarea id="bidList" name="bidList"></textarea>
        </section>

        <footer>
           <address>
              Schmitt AuctionHaus &#183;
              3401 Rural Route 4 &#183;
              Fenbrook, IN  38012
           </address>
        </footer>

     </form>
  </body>

</html>

and then the .js file

var bids = [];
var bidders = [];
var bidTime = [];

function writeBid() {
    var historyText = "";


    for (var i =0; i < bids.length; i++) {
        historyText += bidTime[i] + " " + bids[i]+ "(" +bidders[i]+ ")" + n\;
    }

    document.bidForm.bidList.value += historyText;
    document.bidForm.latestBid.value = bidders[0];
    document.bidForm.bidId.value = "";
    document.bidForm.bidAmount.value = "";
}

function addBid() {
    bidders.unshift(document.bidForm.bidId.value);
    bids.unshift(document.bidForm.bidAmount.value);

    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

        if (hours < 10) {
            hours = "0" + hours;
        }
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
    var timeText = "[" + hours + ":" + minutes + ":" + seconds + "]";
    bidTime.unshift(timeText);
    writeBid();
}

function removeBid() {
    bidders.shift();
    bids.shift();
    bidTime.shift();
    writeBid();
}

Please point to the line where the error comes from. Also I can see no `blank()` defined or used anywhere. — Balázs Édes, Mar 06 '15 at 06:15
Are `addBid()` and `removeBid()` the undefined functions, is it something inside them? — Spencer Wieczorek, Mar 06 '15 at 06:24

halex · Answer 1 · 2015-03-06T06:41:32.710

In your function writeBid you have the line historyText += bidTime[i] + " " + bids[i]+ "(" +bidders[i]+ ")" + n\; What's that n/ at the end? I guess you are trying to add a newline at the end as you don't have a variable n defined.

Change the line to

historyText += bidTime[i] + " " + bids[i]+ "(" +bidders[i]+ ")\n";

and the submit at least should work.

I also think in writeBid you want to change the line

document.bidForm.bidList.value += historyText;

to

document.bidForm.bidList.value = historyText;

var bids = [];
var bidders = [];
var bidTime = [];

function writeBid() {
    var historyText = "";


    for (var i = 0; i < bids.length; i++) {
        historyText += bidTime[i] + " " + bids[i] + "(" + bidders[i] + ")\n";
    }

    document.bidForm.bidList.value = historyText;
    document.bidForm.latestBid.value = bidders[0];
    document.bidForm.bidId.value = "";
    document.bidForm.bidAmount.value = "";
}

function addBid() {
    bidders.unshift(document.bidForm.bidId.value);
    bids.unshift(document.bidForm.bidAmount.value);

    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    if (hours < 10) {
        hours = "0" + hours;
    }
    if (minutes < 10) {
        minutes = "0" + minutes;
    }
    if (seconds < 10) {
        seconds = "0" + seconds;
    }
    var timeText = "[" + hours + ":" + minutes + ":" + seconds + "]";
    bidTime.unshift(timeText);
    writeBid();
}

function removeBid() {
    console.log(bidders);
    console.log(bids);
    console.log(bidTime);
    bidders.shift();
    bids.shift();
    bidTime.shift();
    writeBid();
    console.log(bidders);
    console.log(bids);
    console.log(bidTime);

}

<form name="bidForm" id="bidForm">
    <header>
        <img src="logo.jpg" alt="Schmitt Auction Haus" />
        <nav class="horizontal">
            <ul>
                <li><a href="#">Home</a>

                </li>
                <li><a href="#">Auctions</a>

                </li>
                <li><a href="#">Features</a>

                </li>
                <li><a href="#">Schedule</a>

                </li>
                <li><a href="#">Contacts</a>

                </li>
            </ul>
        </nav>
    </header>
    <section id="intro">
         <h1>Silent Auction</h1>

         <h2>Tawney Farm</h2>

        <table id="summarytable">
            <tr>
                <th>Lot #121</th>
                <td>TurfTuff Lawn Tractor X24 (2015)</td>
            </tr>
            <tr>
                <th>Latest Bid</th>
                <td>
                    <input id="latestBid" name="latestBid" readonly="readonly" />
                </td>
            </tr>
            <tr>
                <th>Bidding Ends</th>
                <td>15:00</td>
            </tr>
        </table>
        <table id="newbidtable">
            <tr>
                <th colspan="2" id="newtitle">Enter New Bid</th>
            </tr>
            <tr>
                <th>Bidder ID</th>
                <td>
                    <input id="bidId" name="bidId" />
                </td>
            </tr>
            <tr>
                <th>Bid Amount</th>
                <td>
                    <input id="bidAmount" name="bidAmount" />
                </td>
            </tr>
            <tr>
                <th id="buttons" colspan="2">
                    <input type="button" value="Submit" onclick="addBid()" />
                    <input type="button" value="Remove Last Bid" onclick="removeBid()" />
                </th>
            </tr>
        </table>
    </section>
    <section id="bidHistory">
         <h1>Bid History</h1>

        <textarea id="bidList" name="bidList"></textarea>
    </section>
    <footer> <address>
              Schmitt AuctionHaus &#183;
              3401 Rural Route 4 &#183;
              Fenbrook, IN  38012
           </address>

    </footer>
</form>

Sing · Answer 2 · 2015-03-06T06:55:33.230

You set the onclick property before your function load, try to use window.onload to set click event, also as @halex solution, your n\ should be "\n":

  window.onload=function() {
            document.getElementById("addBid").onclick = addBid;
            document.getElementById("removeBid").onclick = removeBid;
        }

        var bids = [];
        var bidders = [];
        var bidTime = [];

        function writeBid() {
            var historyText = "";


            for (var i =0; i < bids.length; i++) {
                historyText += bidTime[i] + " " + bids[i]+ "(" +bidders[i]+ ")" + '\n';
            }

            document.bidForm.bidList.value += historyText;
            document.bidForm.latestBid.value = bidders[0];
            document.bidForm.bidId.value = "";
            document.bidForm.bidAmount.value = "";
        }

        function addBid() {
            bidders.unshift(document.bidForm.bidId.value);
            bids.unshift(document.bidForm.bidAmount.value);

            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();

            if (hours < 10) {
                hours = "0" + hours;
            }
            if (minutes < 10) {
                minutes = "0" + minutes;
            }
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            var timeText = "[" + hours + ":" + minutes + ":" + seconds + "]";
            bidTime.unshift(timeText);
            writeBid();
        }

        function removeBid() {
            bidders.shift();
            bids.shift();
            bidTime.shift();
            writeBid();
        }

<form name="bidForm" id="bidForm">

    <header>
        <img src="logo.jpg" alt="Schmitt Auction Haus" />
        <nav class="horizontal">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Auctions</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Schedule</a></li>
                <li><a href="#">Contacts</a></li>
            </ul>
        </nav>
    </header>

    <section id="intro">
        <h1>Silent Auction</h1>
        <h2>Tawney Farm</h2>

        <table id="summarytable">
            <tr>
                <th>Lot #121</th>
                <td>TurfTuff Lawn Tractor X24 (2015)</td>
            </tr>
            <tr>
                <th>Latest Bid</th>
                <td>
                    <input id="latestBid" name="latestBid" readonly="readonly" />
                </td>
            </tr>
            <tr>
                <th>Bidding Ends</th>
                <td>15:00</td>
            </tr>
        </table>

        <table id="newbidtable">
            <tr>
                <th colspan="2" id="newtitle">Enter New Bid</th>
            </tr>
            <tr>
                <th>Bidder ID</th>
                <td>
                    <input id="bidId" name="bidId" />
                </td>
            </tr>
            <tr>
                <th>Bid Amount</th>
                <td>
                    <input id="bidAmount" name="bidAmount" />
                </td>
            </tr>
            <tr>
                <th id="buttons" colspan="2">
                    <input id="addBid" type="button" value="Submit" />
                    <input id="removeBid" type="button" value="Remove Last Bid" />
                </th>
            </tr>
        </table>

    </section>

    <section id="bidHistory">
        <h1>Bid History</h1>
        <textarea id="bidList" name="bidList"></textarea>
    </section>

    <footer>
        <address>
            Schmitt AuctionHaus &#183;
            3401 Rural Route 4 &#183;
            Fenbrook, IN  38012
        </address>
    </footer>

</form>

Javascript -> Uncaught ReferenceError - 'blank()' is not defined, yet it clearly is

2 Answers2