I’m trying to create a function which simply toggles between 1 and 0, something like…
function rotate () {
//how do I get the # of times the function is run?
if(x %2 ==0){
document.getElementById('rotate') = 0;
} else {
document.getElementById('rotate') = 0;
}
I’m not sure how you want to use it, but to toggle variable x between 1 and 0 just use
x = 1 - x;
dang it, thought this was good
var x = document.getElementById('rotate').value;
x++;
if(x %2 == 0){
x = 0;
} else {
x = 1;
}
so how do you increment x when the function runs
the 0 and 1 are in an input field
We want a function that can remember things. Usually an IIFE (immediately invoked function expression) is used for that, so that the outer function remembers things, and the returned code is what accesses the information.
const rotate = (function iife() {
let lastValue = 0;
return function () {
lastValue = 1 - lastValue;
return lastValue;
};
}());
And yes I kept it simple with 1-lastValue like @Gandalf, because the x%2 stuff is another complexity that just isn’t needed yet.
Each time you run rotate(), it gives 1, or 0, or 1, or 0, or 1, or 0 . . .
When the function is run, isn’r lastValue set to 0? Then isn’t 1-0 (or 1) always going to be the result? The only reason I used the % is cause I wanted to switch around the width and height attributes of
<rect x="25" y="15" width="73.741142857143" height="6.2742857142857" id="new_asset" transform="translate(0)"></rect>
like
function rotate () {
var asset = document.getElementById('new_asset');
var x = document.getElementById('rotate').value;
x++;
if(x % 2 == 0){
asset.setAttribute("height", "<?=($new_asset_height * 5.71428571428571)?>");
asset.setAttribute("width", "<?=($new_asset_width * 9.714285714285714)?>");
} else {
asset.setAttribute("width", "<?=($new_asset_height * 5.71428571428571)?>");
asset.setAttribute("height", "<?=($new_asset_width * 9.714285714285714)?>");
}
Yes, initially it is.
1 is the new result, which is assigned to lastValue, and is the value that is returned.
Then the next time 1-lastValue is 1-1 which is 0, which is assigned to lastValue. That value of 0 is then returned.
The next time, 1-lastValue is 1-0 which is 1, which is assigned to lastValue. That value of 1 is then returned.
ok, so lastValue is set to 0 at first, and is never overwritten (is that what let means?)
It is overwritten. The line lastValue = 1 - lastValue; overwrites it.
When it comes to const and let, const cannot be reassigned, and let can be reassigned. Let is similar to var, but var has function scope, whereas let has block scope.
To avoid confusion I try to stick to let and const, so that I’m not mixing function scope and block scope. That’s a confusion best avoided.
Most of the variable assignments that I use are const. I only use let on the deliberate occasions when I intend for that value to be changed.
ok, is it ok to modify it like…
const rotate = (function iife() {
let lastValue = 0;
return function () {
lastValue = 1 - lastValue;
return lastValue;
};
if(lastValue == 1){
asset.setAttribute("height", "<?=($new_asset_height * 5.71428571428571)?>");
asset.setAttribute("width", "<?=($new_asset_width * 9.714285714285714)?>");
} else {
asset.setAttribute("width", "<?=($new_asset_height * 5.71428571428571)?>");
asset.setAttribute("height", "<?=($new_asset_width * 9.714285714285714)?>");
}
}());
No that’s not suitable.
Better is to adjust the function to be called alternate and return true or false, then use that in the condition to decide things.
const alternate = (function iife() {
let lastValue = false;
return function () {
lastValue = !lastValue;
return lastValue;
};
}());
if (alternate()) {
// do asset stuff here
} else {
// do other asset stuff here
}
when I click the button to fire off the function,
onclick="alternate()"
nothing seems to happen
The alternate function just gives true or false. You’ll need to use a different function that as a part of it uses the alternate.function.
I thought thats what I did
const alternate = (function iife() {
let lastValue = false;
return function () {
lastValue = !lastValue;
return lastValue;
};
}());
function rotate() {
if (alternate()) {
document.getElementById('new_asset').setAttribute("height", "<?=($new_asset_height * 5.71428571428571)?>");
document.getElementById('new_asset').setAttribute("width", "<?=($new_asset_width * 9.714285714285714)?>");
} else {
document.getElementById('new_asset').setAttribute("width", "<?=($new_asset_height * 5.71428571428571)?>");
document.getElementById('new_asset').setAttribute("height", "<?=($new_asset_width * 9.714285714285714)?>");
}
console.log(alternate);
}
doesnt rotate simply test if alternate is true/false
So shouldn’t the onclick be for rotate instead of alternate?
I have
onclick="rotate()"
ohm, its working now, thanks
For testing you can assign alternate to a variable, before using it in the if statement.
const shouldAlternate = alternate();
console.log({shouldAlternate});
if (shouldAlternate) {This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.