Open image using Java Script and call the function in html

Question

I have two separate files one with my html code and with my javaScript. What I am trying to do is create a function in javascript then call that function in the html. Both files are in the same folder along with the image. I'm new to both languages and to this site so please go easy;

I would really appreciate it if someone could help me please.`

JavaScript to load image below:

var menu =  new image();

menu.src = "Fitness App Entry Scrren.jpg"

function menuScreen(){
    document.getElementById("menu").getAttribute("src");
}

Html code to call function:

<!DOCTYPE html>
<html>
    <head>
    <body src="Functions.js">
    <script onload="menuScreen()"></script>
    </body> 
    <head>
</html>

It looks like to me (although I'm new to this as well) that you should make an image tag (``) and then somehow reference _that_ to your JS. Currently you're running the code, I think, but not applying it to an element, if you know what I mean. — kairocks2002, Jan 22 '16 at 23:29
And when you say Java, do you mean JavaScript? They are two different languages — khelwood, Jan 22 '16 at 23:30
Do you know that [Java != JavaScript](http://stackoverflow.com/a/245069/1393766)? (it is also mentioned in tag description). — Pshemo, Jan 22 '16 at 23:31
Also `document.getElementById("menu")` is not going to work because you haven't put menu in the document. — John Hascall, Jan 22 '16 at 23:35
I appreciate your help but what do you mean in the document? — HOAX, Jan 22 '16 at 23:41

score 0 · Answer 1 · answered Jan 22 '16 at 23:50

What you are doing is against the rules of HTML. First of all, <body></body> should be outside of <head></head>. You should have <script></script> in either <head></head> or <body></body>. The <body> tag should have the onload attribute set to menuScreen(), and the <script> tag's src attribute should be set to Functions.js (as John Hascall said). By the way, John Hascall is right, there is no element with the ID of "menu" so it won't work unless you create a <div> or <iframe> with the specific ID and append the image to it in your Functions.js file.

So, your JavaScript code should look like this:

var menu = new Image(); // note that the constructor is capitalized
menu.src = "Fitness App Entry Screen.jpg";

// Create a <div> with the image within it.
var division = document.createElement("div");
division.setAttribute("id", "menu");
division.appendChild(menu);
document.body.appendChild(division);

function menuScreen() {
    division.getAttribute("src"); // you can use division because it has the id of menu
}

And here is your HTML code to run the page (according to the HTML5 specifications, note that):

<!DOCTYPE html>
<html>
    <head>
         <script src="Functions.js"></script>
    </head>
    <body onload="menuScreen()">
         <!-- Left intentionally blank -->
    </body>
</html>

Hopefully this will help you!

I have just tried that but it's still not opening the image. — HOAX, Jan 23 '16 at 00:10

Open image using Java Script and call the function in html

1 Answers1