Im working on a website, and I'm trying to programmatically fade an object in and out.
However when i run my loop it only subtracts the opacity from the object, when I try to add to the opacity it just stays at 0.01 for the entire 100 loops, but when it runs 100-199 it subtracts 0.01 every time.
I'm confused why its doing such...
function searched() {
var count = 0;
if (srched) {
return
} else {
let runloop = setInterval(function () {
if (count <= 99) {
document.getElementById("done").style.opacity += 0.01;
} else if (count > 99 && count <= 199) {
document.getElementById("done").style.opacity -= 0.01;
} else {
clearInterval(this)
srched = false;
}
count += 1;
}, 40)
}
}
The html code is:
<p id = "done" style="opacity: 0; color: #1a5b02;">
There's no problem with the loop, just adding to the opacity.
The problem is that += can also mean concatenation, so the opacity property gets a value of '0' + '0.01' = '00.01' for a value the first time in the loop, which is corrected to 0.01, but then you get '0.010.01' in the next iteration, which is an error.
-= does not have the problem - it cannot be a string operation, so it just does the subtraction.
Solution: make sure not to do concatenation by mistake. I think the shortest solution is to write ...opacity -= -0.01; but I'm curious if there are any shorter ones ;)
You need to use Number() to add/subtract your opacity, otherwise it is treating as string and hence your effect is not working
var srched=false;
function searched() {
var count = 0,done=document.getElementById("done");
if (srched) {
return
} else {
let runloop = setInterval(function () {
if (count <= 99) {
done.style.opacity = Number(done.style.opacity)+0.01;
} else if (count > 99 && count <= 199) {
done.style.opacity = Number(done.style.opacity)-0.01;
} else {
clearInterval(this)
srched = false;
}
count += 1;
}, 40)
}
}
searched();
<p id="done">Lorem ipsum doner inut</p>
Related
thanks for looking into this for me.
The issue I am facing is this:
I am keeping track of a variables value, i want to trigger blocks of code after certain values are reached.
currently I am using a switch statement but I am looking for something dynamic.
Example I have now:
class className{
constructor(param){
this.param = param
switch(param.x){
case 25:
param.y += 0.1;
break;
case 50:
y += 0.1;
break;
case 75:
y += 0.1;
break;
}
}
As you can see i want run a block of code after the value of X increments by 25
to manually code each block becomes tedious
i want the same code to run every time the value of x increments by 25
x has no limit and this increments infinitely
so i was looking for some kind of infinite loop or something
does anyone know what I can use for this particular situation
If i could right it like this:
param.x.forEach(25){
param.y += 0.1;
}
I did try this above but to no avail it did not work lol
how can i do this guys any help please?
You could do the calculation like this (x % 25) == 0
var y = 0;
var x = 0;
function trig() {
x++;
console.log(x)
if ((x % 25) == 0) {
y += 0.1;
console.log(y, x)
}
}
setInterval(() => {
trig()
}, 100)
ON Class
class className {
constructor(param) {
this.param = param
}
inc() {
this.param.x++;
if ((this.param.x % 25) == 0) {
this.param.y += 0.1;
}
}
//you could call the inc() function on you click or activity
}
I believe you can just check if (x % 25 === 0 ){ ..do stuff }
I want to call the boss[i].showBoss() and .moveBoss() functions every time the counter is 10,20,30,40...(dividable by 10), ( if(counter % 10 === 0) works only when the counter is at a number divisible by 10, not the others), but this hard-coded example only runs the code once after counter == 10, not when counter == 20,30,40 etc. Any suggestions on how I can can start the functions every time counter % 10 == 0, but not stop them after the counter is not % 10, for instance 11?
function draw() {
// put drawing code here
background(220);
if (counter >= 10) {
for(i = 0; i < boss.length; i++){
boss[i].showBoss();
boss[i].moveBoss();
}
} else if (counter >= 20) {
for(i = 0; i < boss.length; i++){
boss[i].showBoss();
boss[i].moveBoss();
}
} else if (counter >= 30) {
for(i = 0; i < boss.length; i++){
boss[i].showBoss();
boss[i].moveBoss();
}
}
}
Create an object to represent your boss action you want to start. When divisible by 10, create one of these and added to a list of bosses to draw. Every draw loop, draw all your bosses.
let bossesToDraw = [];
function draw(){
if(counter % 10 == 0){
bosses.push({
// state for the boss like its current position
// this could also create a new boss if you have a proper object
});
}
bosses.forEach(function(boss){
boss.showBoss();
boss.moveBoss()
});
//maybe check if you should remove the boss
}
You are kind of answering your own question here...
Can't you just do:
function draw() {
// put drawing code here
background(220);
if (counter % 10 === 0) {
for (i = 0; i < boss.length; i++) {
boss[i].showBoss();
boss[i].moveBoss();
}
}
}
The function draw() will run anyways. What you need to do is to check when your counter is divisible by 10, your instruction counter % 10 === 0 works fine for that.. Here I've mimic the draw function behaviour with a setInterval. Please note that the draw function is now an arrow function, that's to have access to the counter variable in the scope. This is irrelevent in your case.
let counter = 0;
let draw = () => {
// we do normal draw things
// background(255);
if(counter % 10 === 0) {
// we need to animate the boss.
console.log('current counter was divisible by 10', counter);
}
counter ++;
};
setInterval(draw, 100)
I want to loop over an array and assign a color on each iteration. When the color is set, I want to delay until the next iteration before changing the color again.
This is the code I currently have but I could not create the delay between each iteration of the for-loop over the just1 array.
var colors = new Array("Good","Warning","Bad");
var crntcolor= 0;
just1=[[2.8077203491999057, -1.0756484331027858], [5.4610502752805568, -1.1574541704299315], [2.414925300315495, -1.506728995633369], [11.3143165555403673, -1.4461945021353346]];
function ChangeText()
{
document.getElementById('changeText').innerHTML = colors[crntcolor];
for(i=0; i<just1.length; i++)
{
if(just1[i][0] >= -5 && just1[i][0] <= 5)
{
crntcolor =0;
}
else if (just1[i][0] > 5 && just1[i][0] <= 10)
{
crntcolor = 1;
}
else if (just1[i][0] > 10)
{
crntcolor = 2;
}
setTimeout("ChangeText();",1000);
}
}
ChangeText();
I suppose what you want to do is loop over the array and between each element have a delay. You need to get rid of the for loop and change the text only for one element at a time:
var colors = new Array("Good","Warning","Bad");
var crntcolor= 0;
var just1 = [[2.8077203491999057, -1.0756484331027858], [5.4610502752805568, -1.1574541704299315], [2.414925300315495, -1.506728995633369], [11.3143165555403673, -1.4461945021353346]];
function ChangeText(index)
{
document.getElementById('changeText').innerHTML = colors[crntcolor];
if(just1[index][0] >= -5 && just1[index][0] <= 5)
{
crntcolor =0;
}
else if (just1[index][0] > 5 && just1[index][0] <= 10)
{
crntcolor = 1;
}
else if (just1[index][0] > 10)
{
crntcolor = 2;
}
if(index < just1.length)
{
setTimeout(function() { ChangeText(index+1); },1000);
}
}
ChangeText(0);
I'm not sure what you mean by the delay between the text specific to the array data present in just1. As far as I can tell, you have specified a fixed delay (1000). Do you mean you want a different delay based on the value of what's in your array? If so, you can alter the value in the loop:
setTimeout(function() { ChangeText(index+1); },1000 * just1[index][0]);
this would set the delay to
2.8, 5.45, 2.41 and 11.31 respectively when you loop through the array
I have the following function which I would like to simplify with a for loop maybe but don't know how to do it. any help will be much appreciated. Basically, if the field value is 0 or null then my total value (field) should be 0 otherwise if the field value is from 1 until 1000 then the total value becomes 5000. For every 1000 (i.e. 1001 until 2000) my total value should increase by 50 i.e. 5050. This should continue until the field value reaches 200000 and the total is 50000.
function calc56() {
var56 = parseFloat(document.getElementById('units56').value - 0);
if (var56 == '' || var56 == 0) {
document.getElementById('amount56').value = 0;
}
else if (var56 < 1000) {
document.getElementById('amount56').value = 5000;
}
else if ((var56 > 1000) && (var56 <= 2000)) {
document.getElementById('amount56').value = 5050;
}
else if ((var56 > 2000) && (var56 <= 3000)) {
document.getElementById('amount56').value = 5100;
}
}
Thanks in advance.
function calc56() {
var el = document.getElementById('units56'); //reference the dom element
var val = +el.value; //convert to float
if (!val) { //if no value, leave untouched
} else if (val < 0) { //if value is less than 0, make it 0.
el.value = 0;
} else { //otherwise, calculate new value
var mod = Math.floor(val / 1000); //calc how many 1000s fit in the value
el.value = mod * 50 + 5000; //use at least 5000, and add 50 for every 1000
}
}
I would suggest you also change the name of the function, as it's not very useful. However, this code right here should be the most efficient you can get while still keeping it readable.
If you need more clarification, feel free to ask in a comment!
I'm working on making a lightbox photo gallery. I want a counter that says eg.: photo 1 from 3.
var imagenumber = 0;
var imagenumber_count = 1;
function prev_btn() {
if (imagenumber_count < 1) {
imagenumber_count = 1;
document.getElementById('counter_txt').innerHTML = imagenumber_count;
} else {
imagenumber_count -= 1;
document.getElementById('counter_txt').innerHTML = imagenumber_count;
}
When I clicked a few times on the prev. button and than I clicked on the next button imagenumber_count+=1;, I got a number in the negative e.g.: -1
Is there anyone who can help me, please?
EDIT: function of the next btn: function next_btn(){imagenumber_count+=1;}'
this would be more simple
function prev_btn() {
if (imagenumber_count > 1) {
imagenumber_count -= 1;
document.getElementById('counter_txt').innerHTML = imagenumber_count;
}
}
You can simplify that a fair bit:
function prev_btn() {
if (imagenumber_count > 1) {
imagenumber_count -= 1;
document.getElementById('counter_txt').innerHTML = imagenumber_count;
}
}
That assumes you didn't have other code that decrements imagenumber_count, and it assumes you don't want imagenumber_count to ever be 0. If 0 is a valid value for it, change the > 1 to > 0.
Use this if statement instead:
if(imagenumber_count > 1) {
imagenumber_count -= 1;
document.getElementById('counter_txt').innerHTML = imagenumber_count;
}