We Keep Coding

Change <p> to <table>

I wants to change the output of the <p id="demo> to <table> with <tr> and <td>but it involved Javascript in the output so it doesn't on what I've tried.
<button onclick="myFunction()">Predict</button>
<div id="demo" align="center"></div>
<script type="text/javascript">
var selectedprg = '';
var selectedcount = '';
var selectedcity = '';
var average = '';
function myFunction() {
document.getElementById("demo").innerHTML = `
<table>
<tr>
<td style="padding: 5px;">Selected program</td>
<td style="padding: 5px;">${selectedprg}</td>
</tr>
<tr>
<td style="padding: 5px;">Total number of students</td>
<td style="padding: 5px;">${selectedcount}</td>
</tr>
</table>'
}
$(document).ready(function(){
$("#prg").change( function(){
selectedprg = $('#prg option:selected').text();
selectedcount = $('#prg option:selected').data('prgcount');
selectedcity = $('#prg option:selected').data('citycount');
if(selectedcount > 5){
average = selectedcount / 3 + 5;
} else{
average = selectedcount / 3 - 5;
}
});
});
</script>
Current output
Expected output
Could someone assist on this? Thank you.

You can do something like this:
document.getElementById("demo").innerHTML = `
<table>
<tr>
<td style="padding: 5px;">Selected program</td>
<td style="padding: 5px;">${selectedprg}</td>
</tr>
<tr>
<td style="padding: 5px;">Total number of students</td>
<td style="padding: 5px;">${selectedcount}</td>
</tr>
</table>
`
the styling should be writing with css ofcourse.

Can’t identify object attribute: Uncaught ReferenceError: fat is not defined

I’m building a simple application to calculate BMI as part of an JS exercise and can’t get past this error when I create an object to read inputs of my form. The error I get is the one in the title. Uncaught ReferenceError: fat is not defined at HTMLButtonElement.
var button = document.querySelector("#button-add");
button.addEventListener("click", function() {
event.preventDefault();
var form = document.querySelector("#add-form");
var patient = getFormPatient
console.log(patient);
var patientTr = document.createElement("tr");
var nameTd = document.createElement("td");
var weightTd = document.createElement("td");
var heightTd = document.createElement("td");
var fatTd = document.createElement("td");
var bmiTd = document.createElement("td");
nameTd.textContent = name;
weightTd.textContent = weight;
heightTd.textContent = height;
fatTd.textContent = fat;
bmiTd.textContent = calculateBmi(weight, height);
patientTr.appendChild(nameTd);
patientTr.appendChild(weightTd);
patientTr.appendChild(heightTd);
patientTr.appendChild(fatTd);
patientTr.appendChild(bmiTd);
var table = document.querySelector("#patients-table");
table.appendChild(patientTr);
})
function getFormPatient(form) {
var patient = {
name: form.name.value,
weight: form.weight.value,
fat: form.fat.value,
height: form.height.value
}
return patient;
}
<header>
<div class="container">
<h1 class="title">Queensland Nutrition</h1>
</div>
</header>
<main>
<section class="container">
<h2>My clients</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Weight(kg)</th>
<th>Height(m)</th>
<th>Fat Percentage (%)</th>
<th>BMI</th>
</tr>
</thead>
<tbody id="patients-table">
<tr class="patients">
<td class="info-name">Paulo</td>
<td class="info-weight">100</td>
<td class="info-height">2.00</td>
<td class="info-fat">10</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">João</td>
<td class="info-weight">80</td>
<td class="info-height">1.72</td>
<td class="info-fat">40</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Erica</td>
<td class="info-weight">54</td>
<td class="info-height">1.64</td>
<td class="info-fat">14</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Douglas</td>
<td class="info-weight">85</td>
<td class="info-height">1.73</td>
<td class="info-fat">24</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Tatiana</td>
<td class="info-weight">46</td>
<td class="info-height">1.55</td>
<td class="info-fat">19</td>
<td class="info-bmi">0</td>
</tr>
</tbody>
</table>
</section>
<section class="container">
<h2 id="titulo-form">Add New Patient</h2>
<form id="add-form">
<div class="grupo">
<label for="nome">Name:</label>
<input id="nome" name="name" type="text" placeholder="enter patient's name" class="campo">
</div>
<div class="grupo">
<label for="peso">Weight:</label>
<input id="peso" name="weight" type="text" placeholder="enter patient's weight" class="campo campo-medio">
</div>
<div class="grupo">
<label for="altura">Height:</label>
<input id="altura" name="height" type="text" placeholder="enter patient's height" class="campo campo-medio">
</div>
<div class="grupo">
<label for="gordura">Fat Percentage:</label>
<input id="gordura" name="fat" type="text" placeholder="enter patient's fat percentage" class="campo campo-medio">
</div>
<button id="button-add" class="botao bto-principal">Adicionar</button>
</form>
</section>
</main>
<script src="js/bmi-calc.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>
I thought I might be making a mistake with variable names, but reviewed them and can’t find any. Any ideas on what I’m doing wrong here?
------------------------- EDIT ---------------------
adding code for the calculateBmi function to make it clearer. That's literally all the code I have for the exercise.
var patients = document.querySelectorAll(".patients");
function calculateBmi(weight, height) {
var bmi = 0;
bmi = weight / (height * height);
return bmi.toFixed(2);
}
for (var i = 0; i < patients.length; i++) {
var patient = patients[i];
var tdWeight = patient.querySelector(".info-weight");
var weight = tdWeight.textContent;
var tdHeight = patient.querySelector(".info-height");
var height = tdHeight.textContent;
var tdBmi = patient.querySelector(".info-bmi");
var validWeight = true;
var validHeight = true;
if (weight <= 0 || weight >= 700) {
validWeight = false;
tdBmi.textContent = "Invalid weight";
patient.classList.add("invalid-patient");
}
if (height <= 0 || height >= 3) {
validHeight = false;
tdBmi.textContent = "Invalid height";
patient.classList.add("invalid-patient");
}
if (validHeight == true && validWeight == true) {
var bmi = calculateBmi(weight, height);
tdBmi.textContent = bmi;
}
}

You have no variables name, weight, height, or fat. I think you meant patient.name, etc.
But you didn't call the function in
var patient = getFormPatient
You need parentheses with the argument after it.
var button = document.querySelector("#button-add");
button.addEventListener("click", function() {
event.preventDefault();
var form = document.querySelector("#add-form");
var patient = getFormPatient(form);
console.log(patient);
var patientTr = document.createElement("tr");
var nameTd = document.createElement("td");
var weightTd = document.createElement("td");
var heightTd = document.createElement("td");
var fatTd = document.createElement("td");
var bmiTd = document.createElement("td");
nameTd.textContent = patient.name;
weightTd.textContent = patient.weight;
heightTd.textContent = patient.height;
fatTd.textContent = patient.fat;
bmiTd.textContent = calculateBmi(patient.weight, patient.height);
patientTr.appendChild(nameTd);
patientTr.appendChild(weightTd);
patientTr.appendChild(heightTd);
patientTr.appendChild(fatTd);
patientTr.appendChild(bmiTd);
var table = document.querySelector("#patients-table");
table.appendChild(patientTr);
})
function getFormPatient(form) {
var patient = {
name: form.name.value,
weight: form.weight.value,
fat: form.fat.value,
height: form.height.value
}
return patient;
}
<header>
<div class="container">
<h1 class="title">Queensland Nutrition</h1>
</div>
</header>
<main>
<section class="container">
<h2>My clients</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Weight(kg)</th>
<th>Height(m)</th>
<th>Fat Percentage (%)</th>
<th>BMI</th>
</tr>
</thead>
<tbody id="patients-table">
<tr class="patients">
<td class="info-name">Paulo</td>
<td class="info-weight">100</td>
<td class="info-height">2.00</td>
<td class="info-fat">10</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">João</td>
<td class="info-weight">80</td>
<td class="info-height">1.72</td>
<td class="info-fat">40</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Erica</td>
<td class="info-weight">54</td>
<td class="info-height">1.64</td>
<td class="info-fat">14</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Douglas</td>
<td class="info-weight">85</td>
<td class="info-height">1.73</td>
<td class="info-fat">24</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Tatiana</td>
<td class="info-weight">46</td>
<td class="info-height">1.55</td>
<td class="info-fat">19</td>
<td class="info-bmi">0</td>
</tr>
</tbody>
</table>
</section>
<section class="container">
<h2 id="titulo-form">Add New Patient</h2>
<form id="add-form">
<div class="grupo">
<label for="nome">Name:</label>
<input id="nome" name="name" type="text" placeholder="enter patient's name" class="campo">
</div>
<div class="grupo">
<label for="peso">Weight:</label>
<input id="peso" name="weight" type="text" placeholder="enter patient's weight" class="campo campo-medio">
</div>
<div class="grupo">
<label for="altura">Height:</label>
<input id="altura" name="height" type="text" placeholder="enter patient's height" class="campo campo-medio">
</div>
<div class="grupo">
<label for="gordura">Fat Percentage:</label>
<input id="gordura" name="fat" type="text" placeholder="enter patient's fat percentage" class="campo campo-medio">
</div>
<button id="button-add" class="botao bto-principal">Adicionar</button>
</form>
</section>
</main>
<script src="js/bmi-calc.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>

Your object patient has all the params,
so use patient.field_name to get the value.
var button = document.querySelector("#button-add");
button.addEventListener("click", function() {
event.preventDefault();
var addForm = document.querySelector("#add-form");
var patient = getFormPatient(addForm)
console.log(patient);
var patientTr = document.createElement("tr");
var nameTd = document.createElement("td");
var weightTd = document.createElement("td");
var heightTd = document.createElement("td");
var fatTd = document.createElement("td");
var bmiTd = document.createElement("td");
nameTd.textContent = patient.name;
weightTd.textContent = patient.weight;
heightTd.textContent = patient.height;
fatTd.textContent = patient.fat;
bmiTd.textContent = calculateBmi(weight, height);
patientTr.appendChild(nameTd);
patientTr.appendChild(weightTd);
patientTr.appendChild(heightTd);
patientTr.appendChild(fatTd);
patientTr.appendChild(bmiTd);
var table = document.querySelector("#patients-table");
table.appendChild(patientTr);
})
function getFormPatient(form) {
var patient = {
name: form.name.value,
weight: form.weight.value,
fat: form.fat.value,
height: form.height.value
}
console.log(patient);
return patient;
}

How to enable/disable a row with checkbox?

I am trying to do a form, when you click on checkbox it has to enables the rows of the form, but it's not working...
For example, there's a checkbox above the by clicking it, it has to enable the rest of rows
I'll appreciate any help,
Thanks in advance.
Here is what I have:
<HTML>
<HEAD>
<TITLE>Online Shopping</TITLE>
<SCRIPT>
//Variables Globales
var RowsInForm = 4
var ProductsInList = 4
var SalesTaxRate = 0.12
var TaxableState = "IVA(12%)"
var ProdSubscript = 0
function MakeArray(n) {
this.length = n
for (var i = 1; i<= n; i++) {
this[i] = 0
}
return this
}
function BuildZeroArray(n) {
this.length = n
for (var i = 0; i<= n; i++) {
this[i] = 0
}
return this
}
function prodobj(name, unitprice) {
this.name = name
this.unitprice = unitprice
}
function ordobj(prodsub, qty, unitprice, extprice) {
this.prodsub = prodsub
this.qty = qty
this.unitprice = unitprice
this.extprice = extprice
}
function strToZero(anyval) {
anyval = ""+anyval
if (anyval.substring(0,1) < "0" || anyval.substring(0,1) > "9") {
anyval = "0"
}
return eval(anyval)
}
function updateRow(rownum){
var exec = 'ProdSubscript = document.ordform.prodchosen'+rownum+'.selectedIndex'
eval (exec)
ordData[rownum].prodsub=ProdSubscript
var exec='tempqty=document.ordform.qty'+rownum+'.value'
eval (exec)
ordData[rownum].qty = strToZero(tempqty)
ordData[rownum].unitprice=prodlist[ProdSubscript].unitprice
ordData[rownum].extprice = (ordData[rownum].qty) * ordData[rownum].unitprice
var exec = 'document.ordform.unitprice'+rownum+'.value = currencyPad(ordData['+rownum+'].unitprice,10)'
eval (exec)
var exec = 'document.ordform.extprice'+rownum+'.value = currencyPad(ordData['+rownum+'].extprice,10)'
eval (exec)
updateTotals()
}
function updateTotals() {
var subtotal = 0
for (var i=1; i<=RowsInForm; i++) {
subtotal = subtotal + ordData[i].extprice
}
document.ordform.subtotal.value = currencyPad(subtotal,10)
salestax = 0
if (document.ordform.Taxable.checked) {
salestax = SalesTaxRate * subtotal * 0.30
}
document.ordform.salestax.value = currencyPad(salestax,10)
document.ordform.grandtotal.value = currencyPad(subtotal+salestax,10)
}
function copyAddress() {
document.ordform.ShipName.value = document.ordform.billName.value
document.ordform.ShipCompany.value = document.ordform.billCompany.value
document.ordform.ShipAdd1.value = document.ordform.billAdd1.value
document.ordform.ShipAdd2.value = document.ordform.billAdd2.value
document.ordform.ShipCSZ.value = document.ordform.billCSZ.value
}
function currencyPad(anynum,width) {
//returns number as string in $xxx,xxx.xx format.
anynum = "" + eval(anynum)
//evaluate (in case an expression sent)
intnum = parseInt(anynum)
//isolate integer portion
intstr = ""+intnum
//add comma in thousands place.
if (intnum >= 1000) {
intlen = intstr.length
temp1=parseInt(""+(intnum/1000))
temp2=intstr.substring(intlen-3,intlen)
intstr = temp1+","+temp2
}
if (intnum >= 1000000) {
intlen = intstr.length
temp1=parseInt(""+(intnum/1000000))
temp2=intstr.substring(intlen-7,intlen)
intstr = temp1+","+temp2
}
decnum = Math.abs(parseFloat(anynum)-parseInt(anynum)) //isolate decimal portion
decnum = decnum * 100 // multiply decimal portion by 100.
decstr = "" + Math.abs(Math.round(decnum))
while (decstr.length < 2) {
decstr += "0"
}
retval = intstr + "." + decstr
if (intnum < 0) {
retval=retval.substring(1,retval.length)
retval="("+retval+")"
}
retval = "BsF"+retval
while (retval.length < width){
retval=" "+retval
}
return retval
}
</SCRIPT>
</HEAD>
<BODY aLink=#8a8a8a bgColor=#ffffff
link=#ff0000 text=#000000 vLink=#215e21>
<H3 align=center><FONT color=#0000ff><FONT size=+1></FONT></FONT></H3>
<P><BR>
<SCRIPT>
//Create a new array named prodlist with six elements.
prodlist = new BuildZeroArray(ProductsInList) //Refers to global variable ProductsInList
//Populate that array with this product info.
//The first item, prodlist[0] must be a "non-product" with
//a unitprice of zero.
prodlist[0] = new prodobj('-none-',0)
prodlist[1] = new prodobj('Apple iPhone ',5200)
prodlist[2] = new prodobj('Pc Laptop',3520)
prodlist[3] = new prodobj('Impresora',4790)
prodlist[4] = new prodobj('TV',8650)
//Create a new array, named ordData, that contains empty Order Objects.
ordData = new MakeArray(RowsInForm)
for (var i=1; i<= RowsInForm; i++) {
ordData[i] = new ordobj(0,0,0,0)}
</SCRIPT>
<FORM name=ordform></P>
<CENTER>
<P><! Display the table header></P></CENTER>
<TABLE align=center border=1>
<CENTER>
<TBODY>
<TR>
<TH width=192>
<CENTER><B>Product</B></CENTER></TH>
<TH width=72>
<CENTER><B>Qty</B></CENTER></TH>
<TH width=120>
<CENTER><B>Unit Price</B></CENTER></TH>
<TH width=120>
<CENTER><B>Ext Price</B></CENTER></TH>
<P><INPUT type=checkbox value=true>
<SCRIPT>
for (var rownum = 1;rownum <= RowsInForm; rownum++) {
document.write('<TR><TD WIDTH=192>')
document.write('<SELECT NAME="prodchosen'+rownum+'" onChange= "updateRow('+rownum+')">')
for (i = 0; i <= ProductsInList; i++) {
document.write ("<OPTION>"+prodlist[i].name)
} document.write ('</SELECT>')
document.write ('</TD><TD WIDTH=72><CENTER><INPUT NAME="qty'+rownum+'" VALUE=""')
document.write ('MAXLENGTH="3" SIZE=3 onChange="updateRow('+rownum+')"></CENTER>')
document.write ('</TD><TD WIDTH=120><CENTER>')
document.write ('<INPUT NAME="unitprice'+rownum+'" VALUE="" MAXLENGTH="10"')
document.write ('SIZE=10 onfocus="this.blur()"></CENTER>')
document.write ('</TD><TD WIDTH=120><CENTER>')
document.write ('<INPUT NAME="extprice'+rownum+'" VALUE="" MAXLENGTH="10"')
document.write ('SIZE=10 onfocus = "this.blur()"></CENTER>')
document.write ('</TD></TR>')
}
</SCRIPT>
<P></P></CENTER></TBODY></TABLE>
<CENTER>
<P><! Second table holds subtotal, sales tax, grand total></P></CENTER>
<TABLE>
<TBODY>
<TR>
<TD width=264></TD>
<TD width=120>
<CENTER>
<P>Subtotal: </P></CENTER></TD>
<TD width=120>
<CENTER>
<P><INPUT maxLength=10 name=subtotal onfocus=this.blur()
size=10></P></CENTER></TD></TR>
<TR>
<TD width=264>
<P><INPUT name=Taxable onclick=updateTotals() type=checkbox value=true>
<SCRIPT>
document.write(TaxableState)
</SCRIPT>
</P></TD>
<TD width=120>
<CENTER>
<P>IVA:</P></CENTER></TD>
<TD width=120>
<CENTER>
<P><INPUT maxLength=10 name=salestax onfocus=this.blur()
size=10></P></CENTER></TD></TR>
<TR>
<TD width=264>
<TD width=120>
<CENTER>
<P>Total: </P></CENTER></TD>
<TD width=120>
<CENTER>
<P><INPUT maxLength=10 name=grandtotal onfocus=this.blur()
size=10></P></CENTER></TD></TR></TBODY></TABLE>
<!--<P><B>Bill To:</B> <! Onto Bill To and Ship To address portions of the form></P>
<TABLE align=center border=1>
<TBODY>
<TR>
<TD width=120>
<P>Name:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=billName size=50></P></TD></TR>
<TR>
<TD width=120>
<P>Company:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=billCompany size=50> </P></TD></TR>
<TR>
<TD width=120>
<P>Address1:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=billAdd1 size=50></P></TD></TR>
<TR>
<TD width=120>
<P>Address2:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=billAdd2 size=50> </P></TD></TR>
<TR>
<TD width=120>
<P>City, State, Zip:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=billCSZ size=50></P></TD></TR>
<TR>
<TD width=120>
<P>Phone:</P></TD>
<TD width=408>
<P><INPUT maxLength=25 name=Phone size=25></P></TD></TR>
<TR>
<TD width=120>
<P>Email address:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=email size=40></P></TD></TR></TBODY></TABLE>
<CENTER>
<P><INPUT onclick=copyAddress() type=button value="Copy 'Bill To' info to 'Ship To' blanks">
</P></CENTER>
<P><B>Ship To:</B> </P>
<TABLE align=center border=1>
<TBODY>
<TR>
<TD width=120>
<P>Name:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=ShipName size=50></P></TD></TR>
<TR>
<TD width=120>
<P>Company:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=ShipCompany size=50></P></TD></TR>
<TR>
<TD width=120>
<P>Address1:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=ShipAdd1 size=50></P></TD></TR>
<TR>
<TD width=120>
<P>Address2:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=ShipAdd2 size=50></P></TD></TR>
<TR>
<TD width=120>
<P>City, State, Zip:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=ShipCSZ size=50></P></TD></TR></TBODY></TABLE>
<P><! In real life, you'd want to omit the whole onclick... thing in the input tag below. ><! Which is to say you want to get rid of... ><! onClick = "alert('I do not really get submitted anywhere. But thanks for trying me!')" ><INPUT onclick="alert('I do not really get submitted anywhere. But thanks for trying me!')" type=submit value=Submit>
<INPUT type=reset value=Reset> <! In real life, you can omit the entire input tag (i.e. the entire line) below ><INPUT onclick="self.location = 'jsindex.htm'" type=button value="All Done">
</FORM></P>-->
</body>
</html>

Error: Is not a function (java script)

I have the follwoing code parts:
Canvas.prototype.pixelOnMouseOver = function pixelOnMouseOver(callback){
var canvas = this._canvas;
var w = this._canvasSize.width, h=this._canvasSize.height;
var data = this._canvas.getImageData(0,0,w,h).data;
canvas.addEventListener('mousemove',function(e){
var idx = (e.offsetY*w + e.offsetX)*4;
var parts = Array.prototype.slice.call(data,idx,idx+4);
callback.apply(canvas,parts);
},false);
AND
var wasOver;
antCanvas.pixelOnMouseOver(function(r,g,b,a){
var isOver = a > 10; // arbitrary threshold
if (isOver != wasOver){
wasOver = isOver;
}
});
Now I get the Error that canvas.addEventListener is not a function. How can I fix this problem? Whar is the reason?
regards
EDIT 1:Here is the HTML code:
<div class="fill pad">
<div style="border:1px solid #ccc" id="aco-canvas"></div>
<input type="file" id="fileInput">
<button id="save_personal_points">Save</button>
<div class="hr vpad"></div>
<div>
<table>
<tr>
<td colspan="2"><b>Debug Info</b></td>
</tr>
<tr style="display:none;" class="aco-info">
<td>Interation: </td><td id="iteration-info"></td>
</tr>
<tr style="display:none;" class="aco-info">
<td>Best Distance: </td><td id="best-distance"></td>
</tr>
<tr style="display:none;" class="position">
<td>Position Info: </td><td id="position"></td>
</tr>
<tr id="aco-buttons">
<td colspan="2"><button id="start-search-btn">Start</button> <button id="clear-graph">Clear</button></td>
</tr>
</table>
I only have posted the in my opinion interessting parts. Because it is not allwoed to so much code only....

Why does my first value printed in Bid History return as undefined but each one after returns correctly?

This was a homework assignment that has already been turned in. I am trying to understand why the first submit returns a undefined value in the time spot, but when it is done again it populates correctly.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
Author: Anthony Weed
Date: 02/16/2015
Filename: auction.htm
Supporting files: ACMlogo.jpg, styles.css
-->
<head> <title>Auction Log</title>
<link rel="stylesheet" href="styles.css" type="text/css"
<title>Auction Log</title>
<script>
var bids = [];
var bidders = [];
var bidTime = [];
var nowTime = new Date();
function updateBid() {
var bidHistory = "";
for (var i = 0; i < bids.length; i++) {
bidHistory += bidTime[i] + bids[i] + "( " + bidders[i] + " )" ;
}
var grr = bids[0];
document.bidForm.bidList.value = bidHistory;
document.bidForm.highBid.value = grr;
document.bidForm.bidId.value = "";
document.bidForm.bidAmount.value = "";
}
function addBid() {
var id_elem = document.getElementById('bidId');
var idval = id_elem.value;
bidders.unshift(idval);
console.log(idval);
var amt_elem = document.getElementById('bidAmount');
var amtval = amt_elem.value;
bids.unshift(amtval);
updateBid();
var nowTime = new Date();
var hours = nowTime.getHours();
var minutes = nowTime.getMinutes();
var seconds = nowTime.getSeconds();
var textTime = "["+ hours + ":" + minutes + ":" + seconds + "]";
bidTime.unshift(textTime);
}
function removeBid() {
bids.shift();
bidders.shift();
bidTime.shift();
updateBid();
}
</script>
</head>
<body>
<form name="bidForm" id="bidForm">
<div id="head">
<p> Home Auctions
Features Schedule
Contacts
</p>
<img src="ACMlogo.jpg" alt="ACM Silent Auction" />
</div>
<div id="intro">
<h1>Silent Auction</h1>
<h2>TWU ACM </h2>
<table id="summarytable" border="2">
<tr>
<th>Item #21</th>
<td>Skyfall (DVD)</td>
</tr>
<tr>
<th>Current High Bid</th>
<td>
<input type="text" id="highBid" name="highBid" value="" />
</td>
</tr>
<tr>
<th>Bidding Ends</th>
<td>15:00PM</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" type ="text" value=""/>
</td>
</tr>
<tr>
<th>Bid Amount</th>
<td>
<input id="bidAmount" name="bidAmount" type="text" value="" />
</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>
TWU ·
MCL 307 ·
Denton, TX 76204
</address>
</form>
</body>
</html>

In the addbid function, you call updatebid() and then process date time info and put it into the bidtime array. When updatebid() runs for the first time, bidtime[0] has not yet been created and assigned.

You're calling updateBid() before you add the current time to bidTime. So bidTime has one less element than bids. When you try to access the missing element, you get undefined. Just move the call to updateBid() to the end of addBid()
var bids = [];
var bidders = [];
var bidTime = [];
var nowTime = new Date();
function updateBid() {
var bidHistory = "";
for (var i = 0; i < bids.length; i++) {
bidHistory += bidTime[i] + bids[i] + "( " + bidders[i] + " )";
}
var grr = bids[0];
document.bidForm.bidList.value = bidHistory;
document.bidForm.highBid.value = grr;
document.bidForm.bidId.value = "";
document.bidForm.bidAmount.value = "";
}
function addBid() {
var id_elem = document.getElementById('bidId');
var idval = id_elem.value;
bidders.unshift(idval);
console.log(idval);
var amt_elem = document.getElementById('bidAmount');
var amtval = amt_elem.value;
bids.unshift(amtval);
var nowTime = new Date();
var hours = nowTime.getHours();
var minutes = nowTime.getMinutes();
var seconds = nowTime.getSeconds();
var textTime = "[" + hours + ":" + minutes + ":" + seconds + "]";
bidTime.unshift(textTime);
updateBid();
}
function removeBid() {
bids.shift();
bidders.shift();
bidTime.shift();
updateBid();
}
<form name="bidForm" id="bidForm">
<div id="head">
<p> Home Auctions
Features Schedule
Contacts
</p>
<img src="ACMlogo.jpg" alt="ACM Silent Auction" />
</div>
<div id="intro">
<h1>Silent Auction</h1>
<h2>TWU ACM </h2>
<table id="summarytable" border="2">
<tr>
<th>Item #21</th>
<td>Skyfall (DVD)</td>
</tr>
<tr>
<th>Current High Bid</th>
<td>
<input type="text" id="highBid" name="highBid" value="" />
</td>
</tr>
<tr>
<th>Bidding Ends</th>
<td>15:00PM</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" type="text" value="" />
</td>
</tr>
<tr>
<th>Bid Amount</th>
<td>
<input id="bidAmount" name="bidAmount" type="text" value="" />
</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>
TWU ·
MCL 307 ·
Denton, TX 76204
</address>
</form>
Instead of separate arrays for bids, bidders, andbidTime, consider using a single array of objects.
bidInfo.unshift({
bid: amtval,
bidder: idval,
time: textTime
});