How should properly put addeventListener
0
AddEventListener won't work when I clicked the button, the class name is exact on the html.
And how to properly set the time interval. I want the ball rolling and stop on the given time example 10s.
This is the html file and below is the js code
<!DOCTYPE html>
<html>
<link rel ='stylesheet' href ="style.css">
<script src = 'main.js'></script>
<body>
<div class = "wrapper_main" align ='center'>
<div > This is a lotto app design sample
<div class="ball-size">
<img src = "numbers/ball-0.png" class = "balls-0">
<img src = "numbers/ball-0.png" class = "balls-1">
<img src = "numbers/ball-0.png" class = "balls-2">
</div>
<div onclick="myFunction()" class ="buttons">
<button class = "btn-roll"> Roll </button>
</div>
</div>
</div>
</body>
</html>
js file ----
document.querySelector(".btn-roll").addEventListener("click", myFunction);
/*
var timesRun = 0;
var interval = setInterval(myFunction, 0);
timesRun += 1;
if(timesRun ===10) {
clearInterval(interval);
} */
function myFunction() {
var balls, balls1, balls2;
balls = Math.floor(Math.random() * 10);
balls1 = Math.floor(Math.random() * 10);
balls2 = Math.floor(Math.random() * 10);
var ballsDOM = document.querySelector(".balls-0");
var ballsDOM1 = document.querySelector(".balls-1");
var ballsDOM2 = document.querySelector(".balls-2");
ballsDOM.src = "numbers/ball-" + balls + ".png";
ballsDOM1.src = "numbers/ball-" + balls + ".png";
ballsDOM2.src = "numbers/ball-" + balls + ".png";
console.log("done");
}
javascript
asked Nov 24 '18 at 8:25
John AbzJohn Abz
12
add a comment |
0
AddEventListener won't work when I clicked the button, the class name is exact on the html.
And how to properly set the time interval. I want the ball rolling and stop on the given time example 10s.
This is the html file and below is the js code
<!DOCTYPE html>
<html>
<link rel ='stylesheet' href ="style.css">
<script src = 'main.js'></script>
<body>
<div class = "wrapper_main" align ='center'>
<div > This is a lotto app design sample
<div class="ball-size">
<img src = "numbers/ball-0.png" class = "balls-0">
<img src = "numbers/ball-0.png" class = "balls-1">
<img src = "numbers/ball-0.png" class = "balls-2">
</div>
<div onclick="myFunction()" class ="buttons">
<button class = "btn-roll"> Roll </button>
</div>
</div>
</div>
</body>
</html>
js file ----
document.querySelector(".btn-roll").addEventListener("click", myFunction);
/*
var timesRun = 0;
var interval = setInterval(myFunction, 0);
timesRun += 1;
if(timesRun ===10) {
clearInterval(interval);
} */
function myFunction() {
var balls, balls1, balls2;
balls = Math.floor(Math.random() * 10);
balls1 = Math.floor(Math.random() * 10);
balls2 = Math.floor(Math.random() * 10);
var ballsDOM = document.querySelector(".balls-0");
var ballsDOM1 = document.querySelector(".balls-1");
var ballsDOM2 = document.querySelector(".balls-2");
ballsDOM.src = "numbers/ball-" + balls + ".png";
ballsDOM1.src = "numbers/ball-" + balls + ".png";
ballsDOM2.src = "numbers/ball-" + balls + ".png";
console.log("done");
}
javascript
asked Nov 24 '18 at 8:25
John AbzJohn Abz
12
add a comment |
0
0
0
AddEventListener won't work when I clicked the button, the class name is exact on the html.
And how to properly set the time interval. I want the ball rolling and stop on the given time example 10s.
This is the html file and below is the js code
<!DOCTYPE html>
<html>
<link rel ='stylesheet' href ="style.css">
<script src = 'main.js'></script>
<body>
<div class = "wrapper_main" align ='center'>
<div > This is a lotto app design sample
<div class="ball-size">
<img src = "numbers/ball-0.png" class = "balls-0">
<img src = "numbers/ball-0.png" class = "balls-1">
<img src = "numbers/ball-0.png" class = "balls-2">
</div>
<div onclick="myFunction()" class ="buttons">
<button class = "btn-roll"> Roll </button>
</div>
</div>
</div>
</body>
</html>
js file ----
document.querySelector(".btn-roll").addEventListener("click", myFunction);
/*
var timesRun = 0;
var interval = setInterval(myFunction, 0);
timesRun += 1;
if(timesRun ===10) {
clearInterval(interval);
} */
function myFunction() {
var balls, balls1, balls2;
balls = Math.floor(Math.random() * 10);
balls1 = Math.floor(Math.random() * 10);
balls2 = Math.floor(Math.random() * 10);
var ballsDOM = document.querySelector(".balls-0");
var ballsDOM1 = document.querySelector(".balls-1");
var ballsDOM2 = document.querySelector(".balls-2");
ballsDOM.src = "numbers/ball-" + balls + ".png";
ballsDOM1.src = "numbers/ball-" + balls + ".png";
ballsDOM2.src = "numbers/ball-" + balls + ".png";
console.log("done");
}
javascript
asked Nov 24 '18 at 8:25
John AbzJohn Abz
12
AddEventListener won't work when I clicked the button, the class name is exact on the html.
And how to properly set the time interval. I want the ball rolling and stop on the given time example 10s.
This is the html file and below is the js code
<!DOCTYPE html>
<html>
<link rel ='stylesheet' href ="style.css">
<script src = 'main.js'></script>
<body>
<div class = "wrapper_main" align ='center'>
<div > This is a lotto app design sample
<div class="ball-size">
<img src = "numbers/ball-0.png" class = "balls-0">
<img src = "numbers/ball-0.png" class = "balls-1">
<img src = "numbers/ball-0.png" class = "balls-2">
</div>
<div onclick="myFunction()" class ="buttons">
<button class = "btn-roll"> Roll </button>
</div>
</div>
</div>
</body>
</html>
js file ----
document.querySelector(".btn-roll").addEventListener("click", myFunction);
/*
var timesRun = 0;
var interval = setInterval(myFunction, 0);
timesRun += 1;
if(timesRun ===10) {
clearInterval(interval);
} */
function myFunction() {
var balls, balls1, balls2;
balls = Math.floor(Math.random() * 10);
balls1 = Math.floor(Math.random() * 10);
balls2 = Math.floor(Math.random() * 10);
var ballsDOM = document.querySelector(".balls-0");
var ballsDOM1 = document.querySelector(".balls-1");
var ballsDOM2 = document.querySelector(".balls-2");
ballsDOM.src = "numbers/ball-" + balls + ".png";
ballsDOM1.src = "numbers/ball-" + balls + ".png";
ballsDOM2.src = "numbers/ball-" + balls + ".png";
console.log("done");
}
javascript
javascript
asked Nov 24 '18 at 8:25
John AbzJohn Abz
12
asked Nov 24 '18 at 8:25
John AbzJohn Abz
12
edited Nov 24 '18 at 12:52
John Abz
asked Nov 24 '18 at 8:25
John AbzJohn Abz
12
asked Nov 24 '18 at 8:25
John AbzJohn Abz
12
asked Nov 24 '18 at 8:25
John AbzJohn Abz
12
12
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
It is important to do the event biding, after the DOM is created and the button exists in the page.
For example this won't work:
<body>
<script>
document.querySelector('.btn-roll').addEventListener('click', myFunction);
function myFunction(){
alert(1);
}
</script>
<button class="btn-roll">click on me</button>
</body>
Because we binded an event on a button that is not exists yet. but:
<body>
<button class="btn-roll">click on me</button>
<script>
document.querySelector('.btn-roll').addEventListener('click', myFunction);
function myFunction(){
alert(1);
}
</script>
</body>
Will work fine.
You can use libraries like jQuery to ensure the DOM is ready like this:
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
document.querySelector('.btn-roll').addEventListener('click', myFunction);
// or:
// $('.btn-roll').on('click',myFunction);
})
function myFunction(){
alert(1);
}
</script>
<button class="btn-roll">click on me</button>
</body>
answered Nov 24 '18 at 8:37
BagheraniBagherani
1,2171430
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53456464%2fhow-should-properly-put-addeventlistener%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
It is important to do the event biding, after the DOM is created and the button exists in the page.
For example this won't work:
<body>
<script>
document.querySelector('.btn-roll').addEventListener('click', myFunction);
function myFunction(){
alert(1);
}
</script>
<button class="btn-roll">click on me</button>
</body>
Because we binded an event on a button that is not exists yet. but:
<body>
<button class="btn-roll">click on me</button>
<script>
document.querySelector('.btn-roll').addEventListener('click', myFunction);
function myFunction(){
alert(1);
}
</script>
</body>
Will work fine.
You can use libraries like jQuery to ensure the DOM is ready like this:
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
document.querySelector('.btn-roll').addEventListener('click', myFunction);
// or:
// $('.btn-roll').on('click',myFunction);
})
function myFunction(){
alert(1);
}
</script>
<button class="btn-roll">click on me</button>
</body>
answered Nov 24 '18 at 8:37
BagheraniBagherani
1,2171430
add a comment |
0
It is important to do the event biding, after the DOM is created and the button exists in the page.
For example this won't work:
<body>
<script>
document.querySelector('.btn-roll').addEventListener('click', myFunction);
function myFunction(){
alert(1);
}
</script>
<button class="btn-roll">click on me</button>
</body>
Because we binded an event on a button that is not exists yet. but:
<body>
<button class="btn-roll">click on me</button>
<script>
document.querySelector('.btn-roll').addEventListener('click', myFunction);
function myFunction(){
alert(1);
}
</script>
</body>
Will work fine.
You can use libraries like jQuery to ensure the DOM is ready like this:
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
document.querySelector('.btn-roll').addEventListener('click', myFunction);
// or:
// $('.btn-roll').on('click',myFunction);
})
function myFunction(){
alert(1);
}
</script>
<button class="btn-roll">click on me</button>
</body>
answered Nov 24 '18 at 8:37
BagheraniBagherani
1,2171430
add a comment |
0
0
0
It is important to do the event biding, after the DOM is created and the button exists in the page.
For example this won't work:
<body>
<script>
document.querySelector('.btn-roll').addEventListener('click', myFunction);
function myFunction(){
alert(1);
}
</script>
<button class="btn-roll">click on me</button>
</body>
Because we binded an event on a button that is not exists yet. but:
<body>
<button class="btn-roll">click on me</button>
<script>
document.querySelector('.btn-roll').addEventListener('click', myFunction);
function myFunction(){
alert(1);
}
</script>
</body>
Will work fine.
You can use libraries like jQuery to ensure the DOM is ready like this:
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
document.querySelector('.btn-roll').addEventListener('click', myFunction);
// or:
// $('.btn-roll').on('click',myFunction);
})
function myFunction(){
alert(1);
}
</script>
<button class="btn-roll">click on me</button>
</body>
answered Nov 24 '18 at 8:37
BagheraniBagherani
1,2171430
It is important to do the event biding, after the DOM is created and the button exists in the page.
For example this won't work:
<body>
<script>
document.querySelector('.btn-roll').addEventListener('click', myFunction);
function myFunction(){
alert(1);
}
</script>
<button class="btn-roll">click on me</button>
</body>
Because we binded an event on a button that is not exists yet. but:
<body>
<button class="btn-roll">click on me</button>
<script>
document.querySelector('.btn-roll').addEventListener('click', myFunction);
function myFunction(){
alert(1);
}
</script>
</body>
Will work fine.
You can use libraries like jQuery to ensure the DOM is ready like this:
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
document.querySelector('.btn-roll').addEventListener('click', myFunction);
// or:
// $('.btn-roll').on('click',myFunction);
})
function myFunction(){
alert(1);
}
</script>
<button class="btn-roll">click on me</button>
</body>
answered Nov 24 '18 at 8:37
BagheraniBagherani
1,2171430
answered Nov 24 '18 at 8:37
BagheraniBagherani
1,2171430
answered Nov 24 '18 at 8:37
BagheraniBagherani
1,2171430
answered Nov 24 '18 at 8:37
BagheraniBagherani
1,2171430
1,2171430
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53456464%2fhow-should-properly-put-addeventlistener%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
