I set up an e-commerce website for a friend using javascript and html, and with the nearlyfreespeech hosting service. I have made sure to load the html page correctly, and there are no errors (in both the console and on the actual page). I have also tried with both the javascript embedded in the html, and with 2 seperate files, but neither works. I am using no external libraries either. I added alerts for when the page loads, but nothing showed up. The page constructor is hooked up to the page via the onload event set on the body tag. I have tried it with Firefox, Google Chrome, and Internet Explorer, but neither worked. When I moved the creation of the controls into the html, the controls were there (meaning that the html is working), but the alerts still didn't show (signifying that the javascript is either being omitted or that the onload event is not being fired). Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<title>GetLost</title>
<script type="text/javascript">
function loadcontrols()
{
var items = ["Green cuff", "Red cuff"];
var prices = ["20.00", "30.00"];
var colors = ["Green", "Red"];
var urls = ["http://media-cache-ak0.pinimg.com/736x/0f/f8/11/0ff811addad9b0165263eb73ba9806f0.jpg", "http://www.opalona.com/images/produits/big/big_2049-3.jpg"];
var controls = [];
for(var i = 0; i < items.length; i++)
{
var item = new loaditem(items[i], prices[i], colors[i], urls[i]);
controls.concat(item);
}
alert("All items loaded.")
}
function loaditem(name, value, color, imageUrl)
{
this.name = name;
this.value = value;
this.color = color;
this.imageUrl = imageUrl;
var container = document.CreateElement("div");
container.style.height = "300px";
container.style.width = "200px";
container.style.backgroundColor = color;
scroller.appendChild(container);
var image = document.CreateElement("img");
image.style.height = "220px";
image.style.witdh = "180px";
image.setAttribute("src", imageUrl);
container.appendChild(image);
var name = document.CreateElement("h4");
name.innerHTML = name + " for $" + value;
container.appendChild(name);
alert("The product " + name + "has been loaded.")
}
</script>
</head>
<body onload="loadcontrols">
<h1><b>Choose a product, and click on it to open it.</b></h1>
<div style="overflow-x: scroll" name="scroller" height="310px" width="650px"></div>
</body>
</html>
onloaddoesn’t take a function name; it takes some JavaScript code to run. If you had a single line of JavaScript code just referencing a variable:Then, well, nothing happens. If you want to call it, you need parentheses: