This question already has answers here:
Why split the <script> tag when writing it with document.write()?
(5 answers)
Closed 8 years ago.
I'm trying to write some code in the <head> like this, but it doesn't work:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.writeln('<script src="js/messages.js"></script>');
</script>
</head>
<body>
<script>
</script>
</body>
</html>
It prints '); in the page and
<head>
<script type="text/javascript">
document.writeln('<script src="js/messages.js"></script>');
</script>
</head>
in the code.
The first </script> will end the script element in the middle of the string.
Your JavaScript will throw an error (because the string isn't terminated) and everything after it will be treated as text in the HTML document (which will get written to the body because you can't have text nodes as child elements of the head element in HTML).
You need to avoid having that sequence of characters in your JavaScript.
Escape the /
document.writeln('<script src="js/messages.js"><\/script>');
Related
This question already has answers here:
how to get <head> content of the current page with jquery or JS
(3 answers)
Closed 3 years ago.
I wanted this code to work without needing to use jquery to get the header tag:
<head>
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script>
$(function(){ $("head").load("header.html") });
</script>
</head>
How's this?
document.getElementsByTagName('head')[0].innerHTML
Or if you are in fact looking for header tags:
document.getElementsByTagName('header')[0].innerHTML
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I'm trying to use function closure in my javascript as follows:
In my html file:
<head>
<script src="myscript.js"></script>
</head>
<body>
<section id="mysectionId"></section>
</body>
In myscript.js:
(function() {
var id = document.getElementById('mysectionId');
console.log(id);
}());
However, id seems to equal null. I'm not sure what I've done wrong - does function closure scope exclude globals like 'document'? If so, how come I can still use 'console.log()' inside the function closure?
You're javascript is running before your html loads. Put your script tag after your html content at the very bottom of the body
<head>
// put css here
</head>
<body>
<section id="mysection"></section>
<script src="myscript.js"></script>
</body>
This question already has answers here:
JavaScript getElementByID() not working [duplicate]
(3 answers)
Closed 7 years ago.
The Problem
I'm trying to display the output of a function to a div, but i can't figure out why it isn't displaying. How can i fix this so that it displays properly?
What i've tried so far
I've copied a document.getElementById statement from another codeblock i wrote that is functioning , and checked it for any typos etc. All seems well there.
I googled innerHTML to be sure that I was using it correctly.
Also changed the document.etc line to document.write to ensure the function was working properly, it output properly.
My Code
<html>
<head>
<script type="text/javascript">
function parameters(one, two) {
document.getElementById('output').innerHTML=(one + two);
}
parameters("coding" , "coffee");
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
The problem is that you're trying to use the div#output before it's even loaded by the browser.
There are two simple solutions for this:
First
Put the <script> tag after the div#output, so it will be already loaded.
<html>
<head>
</head>
<body>
<div id="output"></div>
<script type="text/javascript">
function parameters(one, two) {
document.getElementById('output').innerHTML=(one + two);
}
parameters("coding" , "coffee");
</script>
</body>
</html>
Second
Put your Javascript code inside the DOMContentLoaded event, so it will only be called after all the DOMElements are loaded in your page.
<html>
<head>
<script type="text/javascript">
function parameters(one, two) {
document.getElementById('output').innerHTML=(one + two);
}
document.addEventListener('DOMContentLoaded', function() {
parameters("coding" , "coffee");
});
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
document.getElementById() doesn't work? [duplicate]
(7 answers)
Closed 7 years ago.
im new to javascript and want to fill a div with some text. but it doesn't work.
in the documentation this is the common way to do this. but, why doesn't work this for me?
my code is
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</head>
<body>
<div id="mytest"></div>
</body>
</html>
You need to move your script to the end of your HTML. Right now, you're executing the script BEFORE your HTML has been parsed so the document is empty and thus document.getElemntById('mytest') does not find anything.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="mytest"></div>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</body>
</html>
See this other answer for a lot more discussion of this issue and other options if you don't want to move your <script> tag:
pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it
thats because, in your document, the javascript is load at the first, but the div with the id mytest is not loaded at this moment.
you have 2 options to get this working:
first: say javascript to wait until the dom is loaded completly
window.onload=function(){
document.getElementById('mytest').innerHTML="hey";
}
second:
put your script code at the bottom, so the javascript is loaded at least.
but i would prefer the first solution.
best
Try in this way
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="mytest"></div>
</body>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</html>
Js fiddle
This question already has answers here:
Code working in jsFiddle but not in browser
(2 answers)
Closed 9 years ago.
I am having a problem with my JavaScript, when I put it into JSFiddle it works fine. But it wont work locally? Here is the fiddle: http://jsfiddle.net/4Ukkz/
var String = "preacher preacher, 5th grade teacher";
document.getElementById('text').innerHTML=String;
So the problem is. In the JSFiddle, the text will display, But locally nothing will display.
Note. It works in the fiddle. but not on my computer
In JSFiddle, your code is automatically wrapped with
window.onload = function() {
// your code
};
This is necessary because in your code, script.js is included above <div id="text"></div>. If you don't wait until that element exists, document.getElementById('text') will return null and the attempt to set innerHTML will fail.
The solution is to wrap your code as above or move your script tag below the div.
May be you don't have a script.js file with the javascript code you pasted in the fiddle?
And move the script element after your body. So your JavaScript code runs after all the elements in the body have been created.
So something like this:
<html>
<title>hi</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="text"></div>
</body>
<script type='text/javascript' src='script.js'></script>
</html>