I'm working on an exercise using array methods, unshift() and shift() among them. In the script below I'm attempting to log an ID from the user, such as "B123" and log their corresponding bid such as "1250." I want to list each bid and id in order from greatest to least bid amount.
This is a learning exercise, not an assignment for marks (it is optional and causing me some trouble) I have included very detailed notes in my script. Could you look at it?
The output right now is: "[Object HTMLInputElement]" in the current high bid field and "Nan{Nan)O" in the Bid history field.
Any advice is always very appreciated. Thanks!
<html>
<head>
<title>Auction Log</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var bids = new Array();
var bidders = new Array();
var bidTime = new Array();
function writeBid() {
// write the bidding history and the highest current bid to the webpage
var historyText= ""; // set the initial value of historyText to an empty text string
/* Insert a For loop in which the counter variable goes from 0 through the length of the bids array in increments of 1. Each time through the loop, append the following text string the the historyText variable: bidTime bids (bidders) \n, where bidTime, bids and bidders are the current items in each array based on the value of the counter variable.*/
for (i =0; i < bids.length; i++); {
historyText= (+bidTime[i] +bids[i] +"("+ +bidders[i] +")"+ +'\n');
}
/* After the For loop finishes, write the value of the historyText variable to the text area box with the name bidList*/
document.bidForm.bidList.value = historyText;
// write the value of the first item in the bids array to the highBid field
document.bidForm.highBid.value = bids[0];
/* set the values of the bidId and bidAmount fields to empty text strings */
document.bidForm.bidId.value = " ";
document.bidForm.bidAmount.value = " ";
}
function addBid() {
// A function that will add a bid to the start of the bids, bidders, and bidTime arrays
/* using the unshift() array method, insert the current value of the bidId field to the start of the bidders array */
bidders.unshift(bidId);
/* use the unshift() array method to insert the current value of the bidAmount field at the start of the bids array */
bids.unshift(bidAmount);
// declare a variable named now containing a date object for the current date and time
var now = new Date();
/* extract the hours, minutes and seconds values from the now variable, storing these values in variables named hours, minutes, and seconds. Use a conditional operator to insert a leading zero in the minutes and seconds values if they are less than 10*/
var hours = now.getHours();
var minutes = now.getMinutes();
minutes = (minutes < 10) ? "0"+minutes: minutes;
var seconds = now.getSeconds();
seconds = (seconds < 10) ? "0"+seconds: seconds;
/* create a variable name timeText equal to the text [hours:minutes:seconds] */
var timeText = (hours +":"+ minutes + ":" + seconds);
/* using the unshift array method, insert the value of the timeText variable at the start of the bidTime array */
bidTime.unshift(timeText);
//call the writeBid() function
writeBid();
}
function removeBid() {
// removes the first entry from the bids, bidders, and bidTime arrays
/* usign the shift() array method, remove the first entry from the bids array, repeating for the frist entry in the bidders and bidTime arrays */
bids[0].shift();
bidders[0].shift();
bidTime[0].shift();
//call the writeBid() function
writeBid();
}
/* Scroll down the document to the Submit input button. Add an event handler attribute to run the addBid() function when the button is clicked*/
</script>
</head>
<body>
<form name="bidForm" id="bidForm">
<div id="head">
<p>
<a href="#">Home</a> <a href="#">Auctions</a>
<a href="#">Features</a> <a href="#">Schedule</a>
<a href="#">Contacts</a>
</p>
<img src="logo.jpg" alt="Schmitt Auction Haus" /></div>
<div id="intro">
<h1>Silent Auction</h1>
<h2>Tawney Farm</h2>
<table id="summarytable" border="2">
<tr>
<th>Lot #121</th>
<td>TurfTuff Lawn Tractor X24 (2003)</td>
</tr>
<tr>
<th>Current High Bid</th>
<td>
<input id="highBid" name="highBid" readonly="readonly" />
</td>
</tr>
<tr>
<th>Bidding Ends</th>
<td>15:00</td>
</tr>
</table>
<table id="newbidtable" border="2">
<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>
</div>
<div id="bidHistory">
<h1>Bid History</h1>
<p>
<textarea id="bidList" name="bidList"></textarea>
</p>
</div>
<address>
Schmitt AuctionHaus ·
3401 Rural Route 4 ·
Fenbrook, IN 38012
</address>
</form>
</body>
</html>