JavaScript is it possible to use var in your .html

Question

Is it possible to use var codes in your HTML file but in a .js file you can have the rest of the script?

for example my code is

<!DOCTYPE html>
<html>
    <head>
    <script type="text/javascript">
    // First Image
    var image = document.getElementById('kximg0');
    var link = document.getElementById('tooltipname');
    var tooltipname = document.getElementById('tooltipname');
    var namebelowimg = document.getElementById('namebelowimg');
    image.src = "your image link for first image here";
    link.title = "Movie title ex Batman (2008)";
    tooltipname.href = "link to site when movie is clicked";
    namebelowimg.innerHTML = "movie name here";
    // End First Image
    </script>
</head>
<body>
    <p id="namebelowimg">this</p>
    <img id="kximg0" src="this-is-a-image-link"><br>
    <a id="tooltipname" title="title">img</a>
</body>
</html>

but is it possible to do this, if so how do I tell JavaScript to search for the id's between the Body Tags because the script is in the Head Tag and it only searches in the head tag but I don't wont the script in the body tag because it makes it easier to access in the head tag if this is not possible then is it possible to include the var in the html file and the script below the vars in a separate .js file? My example below should explain better.

html file

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
    // First Image
    var image = document.getElementById('kximg0');
    var link = document.getElementById('tooltipname');
    var tooltipname = document.getElementById('tooltipname');
    var namebelowimg = document.getElementById('namebelowimg');
    // End First Image
    </script>
</head>
<body>
    <p id="namebelowimg">this</p>
    <img id="kximg0" src="this-is-a-image-link"><br>
    <a id="tooltipname" title="title">img</a>
</body>
</html>

js file

// First Image
    image.src = "your image link for first image here";
    link.title = "Movie title ex Batman (2008)";
    tooltipname.href = "link to site when movie is clicked";
    namebelowimg.innerHTML = "movie name here";
// End First Image

If you need a better example go here

@trincot This is not a duplicate because my question IS NOT var cant find id does my question say anything about that — BannerBomb, Nov 02 '16 at 21:42
You asked *how do I tell JavaScript to search for the id's*, and *it only searches in the `head` tag*. The referenced question/answer deals with that, and provides the way how to do it so that the ids are found. If you still have questions after that, feel free to post a new question. — trincot, Nov 02 '16 at 21:47
If you read the duplicate question you would understand what your issue is... — Adjit, Nov 02 '16 at 21:49
yea but thats only one sentence of the question. I know how to make it search for the id's but not between a different tag than the script is in also I have 2 questions in the post. Well 3 but but 2 for the main questions. — BannerBomb, Nov 02 '16 at 21:50
But the other questions are pointless if you solve the issue of "only searching the `` tags". Just wrap your code in the script in `window.onload = function() { //your code };` You should be more open to fully reading a suggested duplicate before declaring it wrong. — Adjit, Nov 02 '16 at 21:52
I would love for you to read the middle question before you comment where it says *is it possible to do this, if so how do I tell JavaScript to search for the id's between the Body Tags because the script is in the Head Tag and it only searches in the head tag but I don't wont the script in the body tag because it makes it easier to access in the head tag if this is not possible then is it possible to include the var in the html file and the script below the vars in a separate .js file? My example below should explain better.* thats my second question. — BannerBomb, Nov 02 '16 at 21:56
You seem to be confused about how JS works... it does search everything, not just the `` tags. However, because the body loads after the head when the script runs those elements don't exist yet, so it never finds them. The marked correct answer still doesn't even answer your second question. Not only that, it really has nothing to do with the first question, and should be asked separately. But, there are already plenty of threads on here that talk about cross file variables - http://stackoverflow.com/questions/2932782/global-variables-in-javascript-across-multiple-files — Adjit, Nov 02 '16 at 22:10
yea but at least the marked correct answer worked for my first question now I only have the last question — BannerBomb, Nov 02 '16 at 22:30

score 1 · Accepted Answer · answered Nov 02 '16 at 21:45

You getElementById won't work because scripts are executed before body is rendered. Simplest way to make it work is to move script tag after the body.

Other way might be to wait for body to load

<script>
function init(){
    var image = document.getElementById('kximg0');
    var link = document.getElementById('tooltipname');
    var tooltipname = document.getElementById('tooltipname');
    var namebelowimg = document.getElementById('namebelowimg');
}
document.addEventListener('DOMContentLoaded', init, false); //this event listener will wait until body is rendered
</script>

JavaScript is it possible to use var in your .html

html file

js file

1 Answers1