var counter;
var count = 0;
//var booli = new Boolean("false");
window.onload = function() {
var x = document.getElementsByClassName('banana')
var i;
for (i = 0; i < x.length; i++) {
let y = x[i];
console.log(y);
x[i].onmousedown = debounce(function() {
//if(booli)
//{
start(y.className, y.value.replace(/\s/g, ''));
//};
}, 550);
};
}
function debounce(a, b) {
return function() {
var timer;
clearTimeout(timer);
timer = setTimeout(function() {
a();
}, b);
};
}
function start(clicked_className, cha) {
counter = setInterval(function() {
add(clicked_className, cha);
count++;
}, 90);
}
function end() {
//booli=false;
clearInterval(counter);
}
function add(clicked_className, cha) {
window.document.numeri.outpu.value =
window.document.numeri.outpu.value + cha;
}
#put {
width: 700px;
height: 18px;
font-size=14pt;
}
<!DOCTYPE html>
<html onmouseup="end()">
<head>
<meta charset="UTF-8">
</head>
<body>
<form name="numeri">
<input type="text" id="put" name="outpu">
<input type="button" id="apple" class="banana" value=" 1 " onmouseleave="end()">
<input type="button" id="ada" class="banana" value=" 2 " onmouseleave="end()">
<input type="button" id="aded" class="banana" value=" 3 " onmouseleave="end()">
</form>
</body>
</html>
Hey guys!
Goal: stop the function that writes numbers before it starts writing numbers
without the commented things the program works, but its not stopping, so i wanted to stop it from executing the function that writes numbers with a boolean.
It has to stop when leaving the button
Why does it not work?
And what are the alternatives?
You had a couple of issues. The 550ms delay on the timeout is causing the onmouseleave to fire before the code in debounce. Also your booli was being set in the wrong spot and was never being reset to true.
let counter;
let count = 0;
let booli = false;
window.onload = function() {
let x = document.getElementsByClassName('banana')
let i;
for (i = 0; i < x.length; i++) {
let y = x[i];
console.log(y);
x[i].onmousedown = debounce(function() {
start(y.className, y.value.replace(/\s/g, ''));
}, 1);//550
}
}
function debounce(a, b) {
return function() {
let timer;
clearTimeout(timer);
booli = true;
timer = setTimeout(function() {
if(booli)
{
a();
}
else
{
clearInterval(counter);
}
}, b);
};
}
function start(clicked_className, cha) {
counter = setInterval(function() {
add(clicked_className, cha);
count++;
}, 90);
}
function end() {
booli = false;
clearInterval(counter);
}
function add(clicked_className, cha) {
window.document.numeri.outpu.value =
window.document.numeri.outpu.value + cha;
}
#put{
width = 700px;
height: 18px;
font-size=14pt;
}
<!DOCTYPE html>
<html onmouseup="end()">
<head>
<meta charset="UTF-8">
</head>
<body>
<form name="numeri">
<input type="text" id="put" name="outpu" style { width = 700px; height: 18px; font-size=14pt; }>
<input type="button" id="apple" class="banana" value=" 1 " onmouseleave="end()">
<input type="button" id="ada" class="banana" value=" 2 " onmouseleave="end()">
<input type="button" id="aded" class="banana" value=" 3 " onmouseleave="end()">
</form>
</body>
</html>
On why it doesn't work:
You have an issue with the way your events are behaving on your <input type="button">s.
For some reason, when you click a button, the onMouseLeave event is triggering, which is running end(). This, in turn, is setting booli to false, which is why it felt like something was wrong with your boolean.
You're also never setting booli to be true anywhere in the code you shared.
booli gets set to false before onMouseDown and start() never gets called.
I set booli as true in your declaration and threw a couple log statements into your code to show what I mean:
var counter;
var count = 0;
var booli = true;
console.log("booli=", booli);
window.onload = function() {
var x = document.getElementsByClassName('banana')
var i;
for (i = 0; i < x.length; i++) {
let y = x[i];
x[i].onmousedown = debounce(function() {
console.log("onMouseDown, booli is", booli);
if(booli) {
start(y.className, y.value.replace(/\s/g, ''));
}
}, 550);
};
}
function debounce(a, b) {
return function() {
var timer;
clearTimeout(timer);
timer = setTimeout(function() {
a();
}, b);
};
}
function start(clicked_className, cha) {
counter = setInterval(function() {
add(clicked_className, cha);
count++;
}, 90);
}
function end() {
console.log("onMouseLeave, setting booli=false");
booli=false;
clearInterval(counter);
}
function add(clicked_className, cha) {
window.document.numeri.outpu.value =
window.document.numeri.outpu.value + cha;
}
#put {
width: 700px;
height: 18px;
font-size=14pt;
}
<!DOCTYPE html>
<html onmouseup="end()">
<head>
<meta charset="UTF-8">
</head>
<body>
<form name="numeri">
<input type="text" id="put" name="outpu">
<input type="button" id="apple" class="banana" value=" 1 " onmouseleave="end()">
<input type="button" id="ada" class="banana" value=" 2 " onmouseleave="end()">
<input type="button" id="aded" class="banana" value=" 3 " onmouseleave="end()">
</form>
</body>
</html>
Related
<!DOCTYPE html>
<html onmouseup="end()">
<head>
<meta charset="UTF-8">
</head>
<script>
var counter;
var count = 0;
window.onload=function()
{
var x=document.getElementsByClassName('banana')
var i;
for (i = 0; i < x.length; i++)
{
let y=x[i]; //////////hier funktioniert es nicht mit var !!!
console.log(y);
x[i].onmousedown = debounce(function()
{
start(y.className,y.value.replace(/\s/g, ''));
}, 550);
}
}
function debounce(a, b)
{
var timer;
return function()
{
clearTimeout(timer);
timer = setTimeout(function()
{
a();
}, b);
};
}
function start(clicked_className,cha)
{
counter = setInterval(function()
{
add(clicked_className,cha);
count++;
},90);
}
function end()
{
clearInterval(counter);
}
function add(clicked_className,cha)
{
window.document.numeri.outpu.value =
window.document.numeri.outpu.value + cha;
}
</script>
<style>
#put
{
width:700px;
height:18px;
font-size=14pt;
}
</style>
<body>
<form name="numeri">
<input type="text" id="put"name="outpu">
<input type="button"id="apple"class="banana"value=" 1 "onmouseleave="end()">
<input type="button"id="ada"class="banana"value=" 2 "onmouseleave="end()">
<input type="button"id="aded"class="banana"value=" 3 "onmouseleave="end()">
</form>
</body>
</html>
It starts after an Interval, but doesnt clear the interval if the conditions for terminating/clearing are met before the interval even started.
Now its like this:
Press button->550ms Waiting time->function->termination if conditions met
But it has to work like this too:
Press button->550ms Waiting time->termination if conditions met->no function
I have no idea how to fix that please help me :(
Also maybe is there a better way to do it in the first place?
I am making a small game where in I have 50 buttons and when I click on any one of the button, its color changes and amongst them, I have one button which is blue in color. If the player clicks on that blue button, he is a winner. He will be given only three chances. I have used a button eventhandler that takes the color id and accordingly changes the color. But the colorId from the count is 51 and not amongst the 1 - 50 buttons. What is wrong?
<html>
<head>
<title>Blue-Box</title>
</head>
<body>
<script>
var colorId;
var button;
var noOfTries = 3;
function createButtons() {
colorId = 0;
for (var index = 0; index <= 50; index++) {
button = document.createElement("button");
button.innerHTML = "box " + index;
button.id = colorId;
button.setAttribute("value", colorId);
button.setAttribute("text", colorId);
button.style.fontFamily = "Times New Roman";
button.style.backgroundColor = "#C0C0C0";
button.style.fontSize = "15px";
document.body.appendChild(button);
colorId++;
button.addEventListener("click", selectColor);
}
}
function selectColor() {
console.log((colorId));
console.log("button click");
if (noOfTries > 0) {
noOfTries = noOfTries - 1;
if ((colorId) <= 24) {
console.log("red color")
document.getElementById(colorId).style.backgroundColor = "#BC8F8F";
}
else if (colorId == 25) {
console.log("blue color")
document.getElementById(colorId).style.backgroundColor = "#0099CC";
document.write("You Won the game");
noOfTries = 3;
}
else if (colorId > 25 && colorId < 51) {
document.getElementById(colorId).style.backgroundColor = "#008080";
}
}
else {
document.write("Your attempts have finished");
}
}
</script>
<div id="divbox">
<button id="buttonbox" onclick="createButtons()">Click to start the Game</button>
</div>
</body>
</html>
Hope this helps you.
<html>
<head>
<title>Blue-Box</title>
</head>
<body>
<script>
var colorId = 1;
var button;
var lives = 0;
function createButtons(){
colorId=0;
for(var index=1;index<=50;index++){
button=document.createElement("button");
button.innerHTML="box "+index;
button.id=colorId;
button.setAttribute("value",colorId);
button.setAttribute("text",colorId);
button.style.fontFamily="Times New Roman";
button.style.backgroundColor="#C0C0C0";
button.style.fontSize="15px";
button.addEventListener("click", function(){
selectColor(this.id);
})
document.getElementById("btnbox").appendChild(button);
colorId++;
}
}
function selectColor(colorId){
lives++;
if(lives < 4){
if (colorId<=24){
document.getElementById(colorId).style.backgroundColor="#BC8F8F";
}
else if (colorId==25){
document.getElementById(colorId).style.backgroundColor="#0099CC";
alert("Winner");
location.reload();
}
else{
document.getElementById(colorId).style.backgroundColor="limegreen";
}
}
else if(lives == 4){
alert("Game over!");
location.reload();
}
}
</script>
<div id="divbox">
<button id="buttonbox" onclick="createButtons()">Click to start the Game</button>
</div>
<div id="btnbox">
</div>
</body>
// first add a global variable
var noOfTries = 3;
function selectColor() {
// check if greater than 3
if(noOfTries > 0) {
// if yes, then decrement
noOfTries = noOfTries - 1;
// continue with the color change
if (colorId<=24) {
document.getElementById(colorId).style.backgroundColor="#BC8F8F";
}
else if (colorId==25) {
document.getElementById(colorId).style.backgroundColor="#0099CC";
}
else {
document.getElementById(colorId).style.backgroundColor="limegreen";
}
}
}
Use:
button.addEventListner("click",function() {
button.style.backgroundColor=nextColor;
})
I want to read 2 inputs from user and save it from my program.
When the user types his input value and submits, the function getValue will be called and values will be put into duration and interval. But when initBuffer is called after getValue, it always tell me that duration and interval are still null. I thought they are global variables...
Can somebody please tell me where I am wrong? Thanks a lot.
//main.js
var duration = null;
var interval = null;
function getValue(){
interval = parseInt(document.getElementById('interval').value);
duration = parseInt(document.getElementById('duration').value);
console.log(window.interval);
if(isNaN(window.interval) || isNaN(window.duration) ){
alert("please give 2 values at the same time");
}
console.log("duration: "+ window.duration + "interval:" + window.interval);
}
function start(){
initBuffer();
}
function initBuffer(){
alert(window.duration);
if(window.duration == null){
console.log('duration set to default: 40');
window.duration = 40; //default (min)
}
if(window.interval == null){
console.log('interval set to default: 5');
window.interval = 5; //default
}
numSamples= Math.floor(duration* 60 /interval);
}
<html>
<head>
<meta charset="utf-8">
<title>Graph</title>
</head>
<style>
#start {
position:absolute;
left:1080px;
top: 30px;
width:30px;
height:30px;
background: #2280ff;
font-size: 12px;
color: white;
border-radius: 10px;
padding: 1em;
}
.div-inline{
display: inline
}
</style>
<body>
<form id = "hint">
<div class = "div-inline">
Interval:
<input type="text" name="interval" id = "interval">(s)
</div>
<div class = "div-inline">
Duration:
<input type = "text" name = "duration" id = "duration">(min)
<input type = "submit" value = "submit" onclick = "getValue() return false">
</div>
<br>
(Default: Interval = 5s, Duration = 40 min)
</form>
<script type="text/javascript">
</script>
<div id = "sec1">
<canvas id = "display" width = "1024" height = "300"></canvas>
</div>
<div id = "start" onclick = "start()" >start</div>
<script src = "main.js" charset="utf-8"></script>
</body>
</html>
This is not an answer, just demonstrating that the fault is not in the posted code
// start of posted code
duration = null;
interval = null;
function getValue() {
window.interval = parseInt(document.getElementById('interval').value);
window.duration = parseInt(document.getElementById('duration').value);
if(isNaN(window.interval) || isNaN(window.duration) ){
alert("please give 2 values at the same time");
}
}
function initBuffer(){
if(window.duration == null){
console.log('duration set to default: 40');
window.duration = 40; //default (min)
}
if(window.interval == null){
console.log('interval set to default: 5');
window.interval = 5; //default
}
numSamples= Math.floor(duration* 60 /interval);
}
// end of posted code
// test code
function test() {
console.log(`duration: ${duration}, interval: ${interval}`);
}
test();
function test2() {
console.log(`duration: ${window.duration}, interval: ${window.interval}`);
}
test2()
window.addEventListener("DOMContentLoaded", function() {
document.getElementById('test').addEventListener('click', test);
test();
initBuffer();
test();
duration = 10;
interval = 10;
test();
getValue();
test();
});
<button id="test" type="button">test</button>
<input type="text" id="interval" value="20">
<input type="text" id="duration" value="30">
Hi I write this simple javascript slideshow cause I want to write my own slideshow in javascript. It automatically change the images by a set time interval. But when I try to click the backward and forward function the result is not accurate or the images are in order.
var images = ["http://i1214.photobucket.com/albums/cc487/myelstery/1.jpg","http://i1214.photobucket.com/albums/cc487/myelstery/2.jpg","http://i1214.photobucket.com/albums/cc487/myelstery/3.jpg"];
var i = 0;
var count = images.length;
function slidingImages()
{
i = i % count;
document.banner.src = images[i];
i++;
}
function forward()
{
i = (i + 1) % count;
document.banner.src=images[i];
}
function backward()
{
if (i <= 0)
{
i = count - 1;
}
else
{
i--;
}
document.banner.src=images[i];
}
window.onload = function()
{
slidingImages(),setInterval(slidingImages, 3000)
};
<center>
<p>
<img src="images/1.jpg" name="banner" id="name"/>
</p>
<input type="button" value="«prev" onClick="backward()">
<input type="button" value="next»" onClick="forward()">
</center>
What is the solution so my slideshow would be accurate?
This will pause the automatic behavior when the mouse is within the red rectangle and continue in auto mode once the mouse is out of the red rectangle. The buttons of course work as expected.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
fieldset { width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; border: 1px solid red; }
</style>
</head>
<body>
<section>
<p>
<img src="images/1.jpg" name="banner" id="name"/>
</p>
<fieldset id="control">
<input id="prev" type="button" value="◄">
<input id="next" type="button" value="►">
</fieldset>
</section>
<script>
var images = ["http://i1214.photobucket.com/albums/cc487/myelstery/1.jpg","http://i1214.photobucket.com/albums/cc487/myelstery/2.jpg","http://i1214.photobucket.com/albums/cc487/myelstery/3.jpg"];
var i = -1;
var count = images.length;
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var control = document.getElementById('control');
var autoSlide;
window.onload = auto;
function auto() {
autoSlide = setInterval(fwd, 3000) };
function pause() {
clearInterval(autoSlide);
}
function fwd() {
if (i >= 0 && i < 2)
{
i += 1;
}
else
{
i = 0;
}
document.banner.src=images[i];
}
function rev() {
if (i > 0 && i <= 2)
{
i -= 1;
}
else
{
i = 2;
}
document.banner.src=images[i];
}
prev.addEventListener('click', function() {
rev();
}, false);
next.addEventListener('click', function() {
fwd();
}, false);
control.addEventListener('mouseover', function() {
pause();
}, false);
control.addEventListener('mouseout', function() {
auto();
}, false);
</script>
</body>
</html>
I am trying to display 1 image after another in IE Mobile. The following code works in IE Desktop but I get an [Object error] If I run it in IE Mobile.
This is the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var interval = 30;
var _timer;
var _index = 0;
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#" title="Play Motion Clip from Beginning" onclick="test();">
<img alt="Play Motion" src="../Images/play_green_controls.png" style="border-style: none; width: 32px; height: 32px; background-color: #000000; cursor: pointer;" id="btnPlay" />
</a>
<img alt="" src="../0000.jpg" id="imgLive" />
<div id="divImage" style="width: 352px; height: 288px; display: none; background-image: url('Portal/Catalogues/000EC902F17F/3/2013/10/6/10/60b01a71-27f9-4122-ae8e-674e65a8b4dd/20131006102041027x75x0.04x0.40x.img00001.jpg');
background-repeat: no-repeat;">
</div>
<div id="divImageCache1" style="width: 352px; height: 288px; display: none;">
<img alt="" src="../0000.jpg" id="imgCached" />
</div>
</div>
</form>
<script type="text/javascript">
function test() {
try {
_timer = setInterval(swapImages(), interval);
}
catch (e) {
alert(e);
}
}
var imgCached = document.getElementById('imgCached');
var imgLive = document.getElementById('imgLive');
function OnImgLoaded() {
imgLive.src = imgCached.src;
}
function swapImages() {
imgCached.onload = OnImgLoaded();
imgCached.src = 'my irl/' + '0000' + _index + '.jpg';
_index = _index + 1;
if (_index == 10) {
_index = 0;
clearTimeout(_timer);
}
}
</script>
</body>
</html>
To debug I changed the javascript to this:
<script type="text/javascript">
function test() {
try {
alert('hi1');
_timer = setInterval(swapImages(), interval);
alert('hi2');
}
catch (e) {
alert(e);
}
}
var imgCached = document.getElementById('imgCached');
var imgLive = document.getElementById('imgLive');
function OnImgLoaded() {
imgLive.src = imgCached.src;
}
function swapImages() {
alert('hi3');
imgCached.onload = OnImgLoaded();
imgCached.src = 'http://www.url.co.uk/Cloud/test/' + '0000' + _index + '.jpg';
_index = _index + 1;
if (_index == 10) {
_index = 0;
clearTimeout(_timer);
}
alert('hi4');
}
</script>
What happened was that I got 'hi1', 'hi3', 'hi4' then object error. the image DID change once.
You are not assining a function to setInterval, you are calling the function and assigning what every it returns.
Your code
_timer = setInterval(swapImages(), interval);
is actually doing this
_timer = setInterval(undefined, interval);
Your code needs to drop the () so you are not calling the function.
_timer = setInterval(swapImages, interval);
You also did it here:
imgCached.onload = OnImgLoaded();
Personally I would not use an interval, your images are NOT going to load in 30 ms. You a timeout after the images are loaded. Something like this would work.
var isRunning,
timer,
intervalMS = 30,
imgLive = document.getElementById('imgLive');
function test() {
_index = 0;
isRunning = true;
if (timer) window.clearTimeout(timer);
swapImages();
}
function setImageSrc (src) {
imgLive.src = src;
if(isRunning) timer = window.setTimeout(swapImages, intervalMS);
}
function swapImages() {
var imgCached = new Image();
imgCached.onload = function() {
setImageSrc(this.src);
};
imgCached.onerror = function() {
setImageSrc("Error.jpg");
};
imgCached.src = 'http://www.informedmotion.co.uk/Cloud/test/' + '0000' + _index + '.jpg';
_index = _index + 1;
if (_index == 10) {
isRunning = false;
}
}