problem: the page executes the javascript onclick propertise before get clicked.
here is my code
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="UTF-8"/>
</head>
<body>
<h1 id="demo">Hello World!</h1>
<script>
var x = document.getElementById("demo");
x.onclick = alert("clicked");
</script>
</body>
</html>
solution: when I change the line x.onclick = alert("clicked");
to
x.onclick = function() {alert("clicked")};
It works.
I want to understand the reason behind this behavior of onclick.
The reason for that behaviour is, that you simply make a function call and when the JavaScript interpreter comes to that line it will be directly executed. You need to implement a reference to a function or a function definition itself to avoid this (as you did in your solution).
x.onclick = myMethod() // NOT working due to directly execution
x.onclick = () => myMethod() // working
x.onclick = myMethod // working
x.onclick = function() { myMethod() } // working
I f you write the code this way also works same
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="UTF-8"/>
</head>
<body>
<script>
var x;
x.onclick = alert("clicked");
</script>
</body>
</html>
SO your code not understand where you try to send this alert so automatically display
so that's not a good way If you try to display alert when clicked on text then do this method
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="UTF-8"/>
</head>
<body>
<h1 id="demo" >Hello world!</h1>
<script>
document.getElementById('demo').onclick = function(){
alert("clicked");
}
</script>
</body>
</html>
Related
I believe that I have a syntax error somewhere in my script, could someone point it out?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Daisy chain</title>
</head>
<body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
for (i=0;i<12;i++)
{
$('<img>')
.attr('src', 'https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg')
.attr('width','100')
.attr('alt', 'Daisy chain')
.appendTo(document.body);
}
</script>
</body>
</html>
Not sure what syntac error you are seeing at your side.. But I would have made some changes
Move the script inside head
add the code inside a function that will be called on page load
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Daisy chain</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
$(function() {
for (i=0;i<12;i++)
{
$('<img>')
.attr('src', 'https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg')
.attr('width','100')
.attr('alt', 'Daisy chain')
.appendTo(document.body);
}
});
</script>
</head>
<body>
</body>
</html>
I started to work on a clicker game in JavaScript, but it's not working. I used the console to inspect the element to find out why it won't add anything to money and I don't think it is showing the variable either because it won't even show a 0.
<!doctype html>
<html lang="en">
<head>
<script>
function addMoney() {
var money
money+1;
var cash = document.getElementById("showmoney");
cash.innerHTML=money;
}
</script>
<meta charset="utf-8">
<title>clicker game</title>
</head>
<p id="showmoney"></p>
<body>
<button id="click" onClick="addMoney">click</button>
</body>
</html>
The call to the function should have parenthesis () :
<button id="click" onClick="addMoney()">
Instead of :
<button id="click" onClick="addMoney">
Also you have to init you variable money and to define it in the global scope so it will not return to default value zero on every click :
var money=0;
Hope this helps.
<!doctype html>
<html lang="en">
<head>
<script>
var money=0;
function addMoney(){
money++;
var cash = document.getElementById("showmoney");
cash.innerHTML=money;
}
</script>
<meta charset="utf-8">
<title>clicker game</title>
</head>
<p id="showmoney">
</p>
<body>
<button id="click" onClick="addMoney()">
click
</button>
</body>
</html>
HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="index.js"></script>
<title>Design All</title>
</head>
<body>
<h2>------------------------</h2>
<h1 id="test">Should this change?!</h1>
<h2>------------------------</h2>
</body>
</html>
External JavaScript Code:
var product = "Camera";
var price = 130;
var introduction = document.getElementById("test");
introduction.innerHTML = product + " " + price;
Note:
1. If i use a function call, it works.
2. If i write the script within the HTML file, it works as well.
3. I used jsfiddle, it displays perfectly fine.
Can anyone help me with this issue?
I think HTML was not loaded yet. Use onload attribute on body to ensure DOM is loaded :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
var myFunction = function() {
var product = "Camera";
var price = 130;
var introduction = document.getElementById("test");
introduction.innerHTML = product + " " + price;
}
</script>
<title>Design All</title>
</head>
<body onload="myFunction()">
<h2>------------------------</h2>
<h1 id="test">Should this change?!</h1>
<h2>------------------------</h2>
</body>
One thing you have to be clear is that HTML loaded sequentially.
In your code
...........................
<script src="index.js"></script>
................
....................
<h1 id="test">Should this change?!</h1>
Here the JavaScript loaded first then the remaining html.
As the JavScript will execute when it is loaded for the way you write it, it will not find the later html tags. So it will not get that element (<h1 id="test">Should this change?!</h1>).
But if you load the JS later then it will work as expected.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Design All</title>
</head>
<body>
<h2>------------------------</h2>
<h1 id="test">Should this change?!</h1>
<h2>------------------------</h2>
</body>
<script src="index.js"></script>
That's why experts suggest to load JS at the end.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Design All</title>
<script src="index.js"></script>
</head>
<body onload = "chng()">
<h2>------------------------</h2>
<h1 id="test">Should this change?!</h1>
<h2>------------------------</h2>
</body>
</html>
index.js
// JavaScript
function chng(){
var product = "Camera";
var price = 130;
var introduction = document.getElementById("test");
introduction.innerHTML = product + " " + price;
}
when used in external main.js (see content below), only the "ready!!" text shows up. But when used inline without referencing the main.js (see below too) both "ready!!" and "clicked!!" text are displayed. Any idea why did I miss here ?
page content case 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script type='text/javascript' src='http://mywpblog.com/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
</head>
<body>
<button class="purchase-test" type="button"></button>
<script type='text/javascript' src='http://mywpblog.com/wp-content/plugins/mytestplugin/assets/js/main.js?ver=3.0.1'></script>
</body>
</html>
page content case 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script type='text/javascript' src='http://mywpblog.com/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
</head>
<body>
<button class="purchase-test" type="button"></button>
<script>
JQuery(document).ready(function() {
console.log("ready!!"); // WOKRS FINE
JQuery('.purchase-test').click(function(e) {
console.log("clicked!!"); // WOKRS FINE AS WELL
});
});
</script>
</body>
</html>
main.js
JQuery(document).ready(function() {
console.log("ready!!"); // WOKRS FINE
JQuery('.purchase-test').click(function(e) {
console.log("clicked!!"); // DOES NOT WORK
});
});
$(function() {
$('.purchase-test').on("click", function(event) {
// If '.purchase-test' is a link:
// A Link
// You must preventDefault
event.preventDefault()
// Log to console
console.log("Clicking Purchase test");
});
$('.non-purchase-test').on("click", function(event) {
console.log("Clicking Non Purchase Test");
});
$(".purchase-test-button").on("click", function(event) {
console.log("Clicking on Button");
});
});
https://jsfiddle.net/cpcmn41z/1/
The console doesn't give any error, and the window displays nothing. What is wrong with it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<script type="text/javascript">
function stuffify(){
for(var a=6;a<=0;a--){
document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
}
}
</script>
</head>
<body>
<div id="stuff" onload="stuffify()"></div>
</body>
</html>
The onload function will work when on the body tag of your document.
Also, the condition of your for loop is incorrect, it should be:
for(var a=6; a >= 0; a--)
try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<script type="text/javascript">
function stuffify(){
for(var a=6;a<=0;a--){
document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
}
}
</script>
</head>
<body onload="stuffify();">
<div id="stuff" ></div>
</body>
</html>
onload is supported by following tags:
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
This explains why stuffify is not triggered after your div is loaded.
So, you can bind the onload function to body instead of div, or insert script after div, like this:
<div id="stuff" ></div>
<script type="text/javascript">
stuffify();
</script>