I have two embedded scripts in my HTML files but only the first one runs. The second one doesn't execute, it's just supposed to change the text of the paragraph. I'm really not familiar with javascript and don't know if there's some async wizardry going on. If I remove the jquery include (and change the code to use the plain method of changing elements), it works fine.
<html>
<body>
<p id="next-track">
Next Track
</p>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"/>
<script>
$("#next-track").html("Bye JavaScript!");
</script>
</html>
You have to separate the script tag, you cannot close it on the opening.
<html>
<body>
<p id="next-track">
Next Track
</p>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>
<script>
$("#next-track").html("Bye JavaScript!");
</script>
</html>
Related
I am trying to teach myself how to modify the DOM using JavaScript. I am at a loss about the following.
This is an HTML snippet.
<html>
<body>
<h1>A heading</h1>
<div id="myDIV"></div>
<script type="text/javascript" src="thejs.js"></script>
<script type="text/javascript">
document.getElementById("myDIV").innerHTML="<p>Try this one comes from script inside html source</p>"
</script>
</body>
</html>
I expect to get a similar result from the external js file linked in the script, which contains this:
document.getElementById("myDIV").innerHTML="<p>While this one comes from a separate JS file</p>";
But nothing happens... I realise this is probably silly, I apologize.
The first script runs and sets the content of the div to "While this one comes from a separate…"
Then, after some time which is imperceptible to a human, passes the second script runs and sets the content of the div to "Try this one comes from script…".
If you want both paragraphs to appear you need to append (e.g. with +=) the data instead of replacing it.
That said, appending chunks of HTML with innerHTML += can cause some issues (it's inefficient as that whole chuck of DOM has to be regenerated and it will blow away inline event handlers) so you are usually better off using the insertAdjacentHTML method instead.
The output depends on where you have included the external js. If you have included it before your embedded script, it will not have any effect, as eventually, it will be overridden by your embedded script. However, if you include the external js after your embedded js, it will work as you want to.
<html>
<body>
<h1>A heading</h1>
<div id="myDIV"></div>
<script type="text/javascript" src="thejs.js"></script>
<script type="text/javascript">
document.getElementById("myDIV").innerHTML="<p>Try this one comes from script inside html source</p>"
</script>
<script type="text/javascript" src="external.js"></script>
</body>
</html>
In my index.html file I have:
<button onclick="myFunction()">Click me</button>
myFunction is located in index.js
how can I call this function when the button is clicked?
You need to add the index.js file at the bottom of your HTML, right before the </body> tag:
<script src="path/to/index.js"></script>
Add to header:
<script type="text/javascript" src="index.js"></script>
Add the js file reference in your html page so its functions can be called from html page.
<script src="yourfile.js"></script>
Also give your button type="button" otherwise this button will submit the page and your function will not be called.
<button type="button" onclick="myFunction()">Click me</button>
I'm guessing you're new to this all, so I'm going to try and explain it a little bit more than the answers above.
When you got your HTML:
<html>
<head>
<title>This is the title of my page</title>
<script src='js/script.js' type='text/javascript'></script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
</html>
When you see this. The <script> tag says to the browser: "Okay, there is coming up some javascript (or jQuery)" so it will look in the src attribute, to see where the javascript is found that should be loaded. When it finds it, it will load it into the html document and you will have the functions in the file ready to be used in your html document. The type attribute just says: "Okay, this script is filled with javascript". You also have type='text/css' for example when you're including a CSS script to style the HTML elements of the page.
Hope it makes sence, and I wish you luck, learning html/css/javascript. If you have any questions, reply to this answer.
I am learning javascript and i can't manage to make this work, an alert message should appear when i click the submit button
Html
<html>
<head>
<title>Understanding the Document Object Model</title>
<script type="javascript" src="script.js"></script>
</head>
<body>
<h1 id="title">Understanding the Document Object Model</h1>
<p id="first">This is the first paragraph</p>
<p id="second"><strong>This is the second paragraph</strong></p>
<p id="third">Third paragraph</p>
<input type="submit" id="clickMe" value="Click Me"/>
</body>
</html>
Javascript script.js
window.onload=function(){
document.getElementById("clickMe").onclick=runTheExample;
}
function runTheExample(){
alert("running the example");
}
Your type attribute is wrong.
It should be "text/javascript"
It works fine for me after making that change
==================================
EDIT:
As a note, my debugging process was to try invoking the alert() directly in the script. script.js became:
alert("running the example");
window.onload=function(){
document.getElementById("clickMe").onclick=runTheExample;
}
function runTheExample(){
alert("running the example");
}
That was triggering the alert either, which says that the whole script isn't in play. So it must be the invocation of the script that's the problem.
Once you've determined that, there aren't many things left to check.
<script type="text/javascript" src="script.js"></script>
You change your external javascript file link like this. Because,type attribute of script tag should come as text/javascript
I'm trying to use an external JavaScript file in order to write "Hello World" into a HTML page.
However for some reason it does not work, I tried the same function and commands inline and it worked, but not when it's using an external JavaScript file. The part I commented out in the JS file was the previous method I was trying to use. Those lines of could worked when I ran the script from the header, and inline. Thanks
Html file:
<html>
<head>
</head>
<body>
<p id="external">
<script type="text/javascript" src="hello.js">
externalFunction();
</script>
</p>
<script type="txt/javascript" src="hello.js"></script>
</body>
</html>
JavaScript file
function externalFunction()
{
var t2 = document.getElementById("external");
t2.innerHTML = "Hello World!!!"
/*document.getElementById("external").innerHTML =
"Hello World!!!";*/
}
In general, you want to place your JavaScript at the bottom of the page because it will normally reduce the display time of your page. You can find libraries imported in the header sometimes, but either way you need to declare your functions before you use them.
http://www.w3schools.com/js/js_whereto.asp
index.html
<!DOCTYPE html>
<html>
<head>
<!-- You could put this here and it would still work -->
<!-- But it is good practice to put it at the bottom -->
<!--<script src="hello.js"></script>-->
</head>
<body>
<p id="external">Hi</p>
<!-- This first -->
<script src="hello.js"></script>
<!-- Then you can call it -->
<script type="text/javascript">
externalFunction();
</script>
</body>
</html>
hello.js
function externalFunction() {
document.getElementById("external").innerHTML = "Hello World!!!";
}
Plunker here.
Hope this helps.
Script tags with SRC values do not run the contents. Split it to two script tags. One for the include, one for the function call. And make sure the include is before the call.
use onload eventListener to make it simple
<script>
window.onload = function() {
externalFunction();
}
</script>
You're trying to call the function before it has been loaded.
Place the load script above the declaration:
<html>
<head>
<script type="txt/javascript" src="hello.js"></script>
</head>
<body>
<p id="external">
<script type="text/javascript">
externalFunction();
</script>
</p>
</body>
</html>
Also you have a typo:
<script type="txt/javascript" src="hello.js"></script>
Should be:
<script type="text/javascript" src="hello.js"></script>
The script type needs to be "text/javascript" not "txt/javascript".
I am learning Javascript and I am trying to learn some pretty basic stuff. Basically I have some text in a <p> tag which I want to append to a variable. However it is not working an I'm not sure why. Any help will be greatly appreciated.
<html>
<head>
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript">
var x = $('p').html();
document.write(x);
</script>
</head>
<body>
<p class="first">Hello World </p>
</body>
</html>
Wrap your code in $.ready handler:
<script type="text/javascript">
$(function(){
var x = $('p').html();
document.write(x);
});
</script>
The ready handler fires after DOM has loaded and parsed meaning only then you can maipulate tags (or DOM).
You are running your script before The <p class="first">Hello World</p> is reached in your HTML. Put your script in the body instead just after the <p> tag:
<html>
<head>
<script type="text/javascript" src="js/jquery.js"> </script>
</head>
<body>
<p class="first">Hello World</p>
<script type="text/javascript">
var x = $('p').html();
document.write(x);
</script>
</body>
</html>
You can also use jQuery's ready function like some others have said, but that's an inefficient solution since you already know at which point in the document the <p> tag is loaded. It's much better to run your script as soon as it's loaded then to wait for the whole document to load using $.ready.
I can't see anything what isn't working (example)
maybe you should write
jQuery(document).ready(function($){
//your javascript code
})
but if it doesn't work with that either I should remind you that document.write normally replaces the content