CODEWITHSUNDEEP
javascriptonload
George Bora
George Bora

Reputation: 1650

The onload() function refuses to run?

Hello I am sorry to bother you with such a simple question but this bit of code, I literally could not find anything wrong with it, but none of the alerts even trigger so I know that init isn't even been passed to window.onload. Here is the code:

window.onload()=init;
alert("The file has been linked to.");
function init(){
    alert("Init has been loaded");
var button = document.getElementById("myButton");
    button.onclick = handleButtonClick; 
 }

function handleButtonClick()
{
    alert("button has been clicked");
    var target = document.getElementById("target");
    var image = document.createElement("<img />");
    image.innerHTML = "<img src=../Images/banner_test.jpg alt=Banner height=42          width=42 />" ;
target.appendChild(image);
 }


The JS is in a external js file I've linked to with:

<script type="text/javascript" src="../JS/Experiment.js" > </script>

Have I misspelt something or forgotten a parameter because as I've said none of the alarms will activate, no use talking about creating a new <img /> and adding it.

The HTML isn't a problem I've tried a simple alert() with inline <script> and it works but I need this to be in a external file.

Upvotes: 2

Views: 232

Answers (3)

Rob W
Rob W

Reputation: 348972

As others have stated, the parens have to be dropped. Before your code runs fine, you have to fix more code, though.

  1. document.createElement accepts a plain string as a parameter, which will be the tag name. Your current code will throw an error at that point.
  2. When an image element has been created, the innerHTML property makes no sense for it. You have to explicitly attach attributes/properties to it (see below).

Fixed code:

function handleButtonClick()
{
    alert("button has been clicked");
    var target = document.getElementById("target");
    //var image = document.createElement("<img />"); // INVALID!!
    var image = new Image(); // or: document.createElement("img");
    //image.innerHTML = "<img src=../Images/banner_test.jpg alt=Banner height=42          width=42 />" ;
    image.src = "../Images/banner_test.jpg";
    image.alt = "Banner";
    image.height = 42;
    image.width = 42;
    target.appendChild(image);
 }

Upvotes: 1

Dave Taylor
Dave Taylor

Reputation: 2045

window.onload isn't a function and so the first line will prevent the rest from running:

window.onload()=init

It should be

window.onload=init;
alert("The file has been linked to.");
function init(){
    alert("Init has been loaded");
var button = document.getElementById("myButton");
    button.onclick = handleButtonClick; 
 }

function handleButtonClick()
{
    alert("button has been clicked");
    var target = document.getElementById("target");
    var image = document.createElement("<img />");
    image.innerHTML = "<img src=../Images/banner_test.jpg alt=Banner height=42          width=42 />" ;
target.appendChild(image);
 }

note that also the init function is only available because JavaScript hoists non "var"ed functions to the top of the scope so watch out for this when you're pointing to functions like this.

Upvotes: 3

JaredMcAteer
JaredMcAteer

Reputation: 22536

window.onload is not a method, drop the parens ()

Upvotes: 4

Related Questions