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");
}
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>
Related
I'm looking for some solution to manipulate a part of HTML body scrip function by injecting some code using tampermonkey on every site load. The purpose of this workaround is to manipulate function behavior. Here's a simple example of what it's going to do:
<html>
<body>...</body>
<script type="text/javascript">...</script>
<script type="text/javascript">
function dosome() {
...
};
function startTimer() {
var countDownTime = 1000 * 60;
...
};
</script>
</html>
For instance in code above, line var countDownTime = 1000 * 60; changes to var countDownTime = 1000 * 45;
You could attempt it by having the parameter be inputted through an input field. See code example below:
<html>
<body>
<input type="number" id="testInput" name="testInput" value="0">
<button type="button" onclick="startTimer()">Submit</button>
<p id="output">Output: </p>
</body>
<script type="text/javascript">
function startTimer() {
var countDownTime = 1000 * document.getElementById("testInput").value;
document.getElementById("output").innerHTML = 'Output: ' + countDownTime;
};
</script>
</html>
You could also make the call from within a button by using the OnClick event.
I have a java script array with large number of elements inside it, on click of a button I want to display the any random array element on screen, for which I have used Math.random function, but not sure why it is not working.
here is my code below.
<html>
<head>
<title>Demo</title>
</head>
<body>
<button id="getquotes" value="Quotes" onclick="Loadquotes();">Quotes</button>
<p id="quoteshere" ></p>
<script>
var Loadquotes= function(){
var quotes = new Array('Stack1','Stack2','Stack16','Stack17','Stack13','Stack14','Stack15','Stack6','Stack7','Stack8','Stack9','Stack10');
var i;
for (i=0;i<quotes.length;i++){
var newquotes = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById('quoteshere').value=newquotes;
}
};
</script>
</body>
</html>
quoteshere is P Tag value function won't work use innerText or innerHTML instead please find below snippet
var Loadquotes= function(){
debugger;
var quotes = new Array('Stack1','Stack2','Stack16','Stack17','Stack13','Stack14','Stack15','Stack6','Stack7','Stack8','Stack9','Stack10');
var i;
for (i=0;i<quotes.length;i++){
var newquotes = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById('quoteshere').innerText = newquotes;
}
};
<button id="getquotes" value="Quotes" onclick="Loadquotes();">Quotes</button>
<p id="quoteshere" ></p>
you can try this
var quotes = Array('Stack1','Stack2','Stack16','Stack17','Stack13','Stack14','Stack15','Stack6','Stack7','Stack8','Stack9','Stack10');
var Loadquotes= function(){
var newquotes = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById('quoteshere').innerHTML=newquotes;
};
<button id="getquotes" value="Quotes" onclick="Loadquotes();">Quotes</button>
<p id="quoteshere" ></p>
Try This
<html>
<head>
<title>Demo</title>
</head>
<body>
<button id="getquotes" value="Quotes" onclick="Loadquotes()"> Quotes </button>
<p id="quoteshere" ></p>
<script>
function Loadquotes(){
var quotes = new Array('Stack1','Stack2','Stack16','Stack17','Stack13','Stack14','Stack15','Stack6','Stack7','Stack8','Stack9','Stack10');
var newquotes = Math.floor(Math.random() * quotes.length);
document.getElementById('quoteshere').innerHTML = quotes[newquotes];
}
</script>
</body>
I have five jpg pictures and on a homepage i want to choose between these five pics by typing 1,2,3,4 or 5 and click OK and then i want that picture to show.
My code looks like this:
var inputElem, msgElem;
function init() {
msgElem = document.getElementById("message");
inputElem = [];
inputElem[1] = document.getElementById("input1");
inputElem[2] = document.getElementById("input2");
inputElem[3] = document.getElementById("input3");
document.getElementById("btn1").onclick = showFruit;
}
window.onload = init;
function showFruit() {
var nr, fruitUrl;
fruitUrl = (fruitImg.src = "pics/fruit" + nr + ".jpg");
nr = Number(input1.value);
fruitImg.src = "pics/fruit" + nr + ".jpg";
fruitUrl = document.getElementById("fruitImg").src = "pics/fruit1.jpg";
The problem is that I can't change the picture.I don't know whats missing, or how to make it choose between pic 1-5.
I have no privilege to write comments, so can't estimate what you actually want. But the resulting effect may be the thing you want.
But have look up below examples (live here). Enter a number then click button.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="image">
<img src="salon1.jpg" id="fruit">
</div>
<input type="number" id="inp">
<input type="submit" id="btn1" onclick="showFruit('inp')">
<script type="text/javascript">
makeImageFromNum = function (n) {
var nr = document.getElementById(n).value;
if (parseInt(nr)>5) {
nr = 5;
}
else if (parseInt(nr)<1) {
nr = 1;
}
return "salon"+nr+".jpg";
}
showFruit = function (n) {
document.getElementById("fruit").src = makeImageFromNum(n);
}
</script>
</body>
</html>
In below example (live here) just change the number - no need to click a button, there is no any actually :)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="image">
<img src="salon1.jpg" id="fruit">
</div>
<input type="number" id="inp" onchange="showFruit(this.value)">
<script type="text/javascript">
makeImageFromNum = function (nr) {
if (parseInt(nr)>5) {
nr = 5;
}
else if (parseInt(nr)<1) {
nr = 1;
}
return "salon"+nr+".jpg";
}
showFruit = function (n) {
document.getElementById("fruit").src = makeImageFromNum(n);
}
</script>
</body>
</html>
Note that you're always assinging the first image in this line of code (the last Iine if your code)
fruitUrl = document.getElementById("fruitImg").src = "pics/fruit1.jpg";
So, you'll always see image one
I am building a simple game as practice that counts the number of taps pressed in 3 seconds i have done everything apart from making it able to save the record score and if there is no record score then to show the old record.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascript1.js"></script>
<link type="text/css" rel="stylesheet" href="firstcss.css">
</head>
</head>
<body>
<div id="div1">
<button onclick="myFunction()" id="something">GO
</button>
</div>
<div id="div2">
<p id="paragraph">0</p>
</div>
<p id="don"></p>
<p id="record"></p>
<p id="add"></p>
<script>
var cool = 1;
var red = 0;
function myFunction() {
document.getElementById("something").innerHTML = "Keep Tapping";
document.getElementById("paragraph").innerHTML = cool;
cool++;
var parent = document.getElementById("div1");
setTimeout(function() {
var ooo = cool - 1;
document.getElementById("don").innerHTML = ooo;
var parent = document.getElementById("div1");
var child = document.getElementById("something");
parent.removeChild(child);
var parent1 = document.getElementById("div2");
var child1 = document.getElementById("paragraph");
parent1.removeChild(child1);
if (cool - 1 > red) {
var red = cool - 1;
document.getElementById("record").innerHTML = red;
} else {
document.getElementById("record").innerHTML = red;
document.getElementById("add").innerHTML = red;
}
}, 3000);
}
</script>
</body>
</html>
I am using the if statement at the end but want to know how you would save the high score or if there isnt one to say the old high score. thanks it would be really helpful.
Check out the following resources on local storage:
http://diveintohtml5.info/storage.html
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
Essentially you can do (taken from the Dive int HTML 5 link):
var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);
I made a simple timer in javascript using a for loop, but upon clicking the button to call the function test(), the whole page freezes up so I assume I have an infinite loop somewhere
This is my code:
<html>
<head>
<script>
function test() {
var HowLong = 5;
for (var i=0;i<HowLong;i--) {
document.write(HowLong[i] + "<br>");
}
}
</script>
</head>
<body>
<input type="button" onclick="test()" value="Start Timer">
</body>
</html>
Yes you have infinite loop problem in the for loop:
for (var i=0;i<HowLong;i--)
Instead of i-- try i++
for (var i=0;i<HowLong;i++)
One more thing HowLong is not an array so you can't use HowLong[i], just simply use :
document.write(i+ "<br>");
As #jfriend00 has mentioned in comments When you use document.write() after the document is loaded, it will clear the current document and start a new one. In your case your button Start Timer will be cleared. If you want to avoid it you can use div and add value to it.
<html>
<head>
<script>
function test() {
var HowLong = 5;
for(var i=0;i<HowLong;i++) {
document.getElementById("myDiv").innerHTML += i + "<br>";
}
}
</script>
</head>
<body>
<input type="button" onclick="test()" value="Start Timer">
<div id="myDiv"></div>
</body>
</html>
Try this;
for (var i=0;i<HowLong;i++) {
document.write(i + "<br>");
}
<html>
<head>
<script>
var HowLong = 5;
var isRun = false;
function mf(i){
document.getElementById('myAnchor').innerHTML = i;
}
function rt(i)
{
setTimeout(function(){
mf(i++);
if(i!=HowLong+1)rt(i);
else isRun = false;
}, 1000); // 1000ms = 1sec
}
function test() {
var i = 1;
if(!isRun)
{
isRun = true;
rt(i);
}
}
</script>
</head>
<body>
<div id="myAnchor"></div>
<input type="button" onclick="test()" value="Start Timer">
</body>
</html>
you forget to add delay in your loop