Javascript alert not working on button click - javascript

I have typed in the javascript just as you have but on a separate file linked through the HTML file. The button shows up however I am not getting any alert when it is clicked. My code is as follows:
Javascript(index.js):
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<button id="myButton">Click</button>
</body>
</html>
Anyone know why my button is not working? It seems to me all my code is in order unless I am overlooking something.


Your code is being executed prior to the element it refers to existing in the page. Move the JavaScript to the end of the document or wrap it in a window.onload function.
window.onload = function () {
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
}
jsFiddle example


You need to wait for the document to be constructed before you can reference elements in it.
Put your script tag in body, just before the end. This will ensure that the document is there when the script runs.
Or, you can wrap your js in a load listener like this
window.addEventListener("load", function(){
//...your stuff here
})


You should not put <script type="text/javascript" src="index.js"></script>
before <body></body>, because when the browser is trying to register the event, the <button> is not loaded already. So when you take a look at the control panel, you would get something like TypeError: document.getElementById(...) is null.
The right version might be
<!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
</head>
<body>
<button id="myButton">Click</button>
</body>
<script type="text/javascript" src="index.js"></script>
</html>


Sometimes you should put script code below the button
<button id="myButton">Click</button>
document.getElementById("myButton").onclick = function () {
alert("Hi");
}


first thing is you haven't included jquery in your code, change your HTML to this
!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<button id="myButton">Click</button>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
and your index.js to
$(document).ready(function(){
$('#myButton').click(function(){
alert("Hi");
});
});
this worked for me hope this work for you too

Related

How to debug why an onload does not work in JavaScript?

This is a test code. It is suppose to show "How are you doing today? Buddy", but it does not show anything on the page right now and console does not say anything. Anyone knows why?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
function demo() {
let newPara = window.document.createElement("p");
newPara.innerHTML = "<h1>How are you doing today? Buddy</h1>";
document.body.append(newPara);
}
</script>
</head>
<body>
<div onload="demo()">
</div>
</body>
</html>

You can't attach onload event on div.
You can attach it to body element.

jquery load function doesnt work

I am unable to get this piece of code working. I am running this on xampp. The alert works fine but the html wont load. Please help.
I have added the links to jquery 3.2.1
index.html
$(document).ready(function(){
$("#buttonClick").click(function(){
alert("Hello");
$("#viable").load('new_123.html');
});
});
</script>
New_123.html
<html>
<body>
<h1>Hello 123</h1>
</body
</html>

Your body tag is missing a closing bracket ">".

I have used the same code and i mgetting the result properly May be that '>' is an issue!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#buttonClick").click(function(){
var d= $("#viable").load('b.html');
});
});
</script>
</head>
<body>
<div id="viable"></div>
<button id="buttonClick"></button>
</body>
</html>

Execution order of JS

I have following code:
<!DOCTYPE html>
<html data-ng-app="">
<head>
<script type="text/javascript" src="myJs.js"></script>
<script type="text/javascript">
function myFunction(){
alert("Hello.. internal JS");
}
</script>
<!--<script type="text/javascript" src="myJs.js"></script>-->
<!--<script type="text/javascript" src="angular.min.js"></script>-->
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
</html>
and myJS.js :
function myFunction(){
alert("Hello.. External JS");
}
and output is: Hello.. internal JS.
I would like to know why the last JS gets executed every time? If I shift the lines to alternate position, the one at the end gets executed.
Thanks

You can check the below fiddle to understand it better. If you define the same function twice, the bottom most will be called.
http://jsfiddle.net/5dALP/

This HTML fails to run the alert() script. Why? Yes. jquery is installed in the correct relative location

The system at JSFiddler seems to think this is Ok too, but won't display the alert either. http://jsfiddle.net/dmafackler/zEEpB/3/
<!doctype html>
<html>
<head>
<title>foobar</title>
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript">
$(document).ready(function() { alert("Is anybody home?"); });
</script>
</head>
<body>
<p>Copasetic.</p>
</body>
</html>

<script> tags aren't self-closing. You need to provide a closing tag:
<script type="text/javascript" src="jquery.js"></script>
If you don't, the HTML isn't parsed correctly:

<h2> background-color is not changing with Jquery?

I have an h2 element with an id of title and I have the following script:
<script type="text/javascript">
$(document).ready(function(){
$("#title").css("background-color","red");
)};
</script>
The background-color is not changing though and I can't figure out why?
<html>
<head>
<title>Table Sorter</title>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.tablsorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#title").css("background-color","red");
)};
</script>
</head>
<body>
<h2 id="title">Table Sorter</h2>
</body>
</html>
<script type="text/javascript">
$(document).ready(function()
{
$("#title").css("background-color","red");
$("#myTable").tablesorter();
}
);
</script>

Replace
<link type="text/javascript" src="/js/jquery-1.3.2.min.js"/>
with
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
You also have a syntax error in your jQuery function at the closing brackets. They should be
$(document).ready(function(){
$("#title").css("background-color","red");
});
If that still does not fix your problem, then put an alert in there like this...
$(document).ready(function(){
alert("Howdy!");
});
If you do not see the alert message, then your jQuery script is not loaded, which means the relative path in the SRC attribute is incorrect.

It seems you've made another typo:
<title>Table Sorter</table>
^^^^^
Replace table with title:
<title>Table Sorter</title>

Can you get it working without jQuery? Try:
document.getElementById("title").style.backgroundColor = "#F00";
instead of your current script. If this does not work, check that you have well-formed HTML.
UPDATE: now that you've posted your HTML, I can see that you need to use a script tag instead of a link tag to import jQuery

Replace
<link type="text/javascript" src="/js/jquery-1.3.2.min.js"/>
with
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"/>

Here you go. Other people have pointed out some small problems you had, such as using a link tag where you need a script tag, etc. This code works for me:
<html>
<head>
<title>Table Sorter</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#title").css("background-color","red");
});
</script>
</head>
<body>
<h2 id="title">Table Sorter</h2>
</body>
</html>
It looks like there was a typo in your code at the end of your $(document).ready section where you had )}; instead of });. If you use Firefox you can open up the error console and view any Javascript errors or warnings.

Ok, I figured it out and I don't know why it is was happening. Below the JQuery script tag, I had another script tag:
<script type="text/javascript" src="/js/jquery.tablsorter.min.js"/>
When I removed the above, it worked. But I don't know why?

Categories

Resources