simple javascript example not working - javascript

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

Related

Second embedded Javascript not running in HTML

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>

How can we call a function in a .js from a .html file

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 thought I defined my jQuery function, but I keep getting an "is not defined" error. Why is this?

My HTML file:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<form name="someForm">
<input type="button" value="Click me" onClick="myFunction()" />
</form>
<div id="result"></div>
</body>
</html>
My script.js file:
function myFunction(){
$("#result").html("BUTTON WORKS");
}
I have Firebug, and whenever I click the button, Firebug throws me this error:
ReferenceError: myFunction is not defined
What am I doing wrong?
script can't be a self closing tag in HTML (it works on some browsers, depending on the doctype, but it's not correct). You must add a closing tag.
Replace
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />
with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
The script element pointing to your script probably isn't parsed correctly due to this error.
From the norm :
A script element must have both a start tag and an end tag.
Blockquote
Might be due to file reference issue.
It is a better practice to attach the event in the js file instead of HTML.
<form name="someForm">
<input type="button" id="btn" value="Click me" />
</form>
$('#btn').on('click', function(){
$("#result").html("BUTTON WORKS");
});
Do you open that file locally (you have file:// in address bar) or from some server (http:// protocol in address bar)? Because if you open file locally, you actually try to load jquery from address:
file://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
which is incorrect. It happens, because you use //ajax.googleapis.com/... as adress, which refers the same protocol as currently opened page.
Either change it to:
http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
of upload your file to some server (or even install one locally) and test it through full http request.
I solved the problem by combining answers from #Susbanth, #MBO, and #dystroy.
Here's my new HTML file:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<form name="someForm">
<input type="button" value="Click me" />
</form>
<div id="result"></div>
</body>
</html>
I added "http" to the jQuery source, closed the tag, and removed the 'onClick' from inside the HTML.
Here's the updated script.js file:
$(document).ready(function(){
$("input[type=button]").on("click",function(){
$("div#result").html("BUTTON WORK");
});
});
I made the onClick event a jQuery event.

javascript beginner- unable to show message box on screen

I am simply trying to show a message box on screen.
This is the HTML for the button that invokes the message box---
<button onclick="myFunction()">Try it</button>
This is the relevant javascript function code--
function myFunction()
{
alert("Hello World!");
}
The javascript function is stored at js/fetchdetails.js (path relative to the HTML file).
I have included the JS file in the HTML file using the following code in the head section--
<script src="js/fetchdetails.js"></script>
What am I doing wrong here?
There's nothing wrong in the code you've posted; the error is somewhere else.
Either your fetchdetails.js is not being loaded, or some error in javascript not shown here causes your script to stop executing.
Use your browser's inspection tool to look for any error messages, and to verify that the file has loaded correctly (there's usually a "Net" tab for that).
Try this..
<!DOCTYPE html>
<html>
<head>
<title>Page Name</title>
<script type="text/javascript" src="js/fetchdetails.js"> </script>
</head>
<body>
<button onclick="myFunction();">Try it</button>
</body>
</html>
In your javascript file
function myFunction(){alert("Hello World!");}
This works perfect for me
If it doesnt work please provide more details or else try these buttons:
<button onclick="javascript:myFunction();">Try it</button>
<input type="button" onclick="myFunction();" value="Try me"/>
<input type="button" onclick="javascript:myFunction();" value="Try Me"/>
Hope this helps

Changing the contents of an href link

The following code is a test piece. Normally the href in the Link would point to "http://www.google.com/", but the attr should change it to reference "http://maps.google.com" BUT, the reference is not changing. Can anyone tell me why it is not working? Thanks
<html>
<head>
<script type="text/javascript">
$("a#changeme").attr('href',
'http:\/\/maps.google.com/');
</script>
</head>
<body>
<div class="content">
<p>Link to <a href="http://www.google.com/"
id="changeme">Google</a>
in the content...</p>
</div>
</body>
</html>
jQuery is not loaded.
If it was, you would have to wrap it in a $(document).ready handler.
This can be done without jQuery.
Code:
window.onload = function() {
document.getElementById("changeme").href = 'http://maps.google.com/';
};
The onload handler is not exactely equal to the DOMContentLoaded handler, but it has a better support, and may be preferred here. Alternatively, you can move the <srcipt> block to the end of the <body>, and then use the method without any onload handlers:
<body>
<div class="content">
<p>Link to Google
in the content...</p>
</div>
<script type="text/javascript">
// This code is placed after the element, so the reference does exist now.
// In the head, the same code will throw an error, because the body doesn't
// even exist.
document.getElementById("changeme").href = 'http://maps.google.com/';
</script>
</body>
The script is in the header so it's executed before the other content has been loaded (if jQuery is even active, seeing no reference to it). You should put it in a function and then call it later on (e.g. through onload or a timer). I could as well think of a security feature in the browser, to keep sites from manipulating links right before you click on them.
Here is the code for the correct jQuery way to do this (using the document ready).
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#changeme").attr('href', 'http:\/\/maps.google.com/');
});
</script>
</head>
<body>
<div class="content">
<p>Link to <a id="changeme" href="http://www.google.com/">Google</a>
in the contenttest...</p>
</div>
</body>
</html>

Categories

Resources