i cant rotate a div in js with an eventlistener and dont know how to fix it. however i do know the problem (i think, im probably incorrect): its NaN. when the parseFloat() checks the rotate, it cant find the number because it thinks its a string, so it returns NaN.
theres also another problem. when the div is going in a direction, the border is vanishing away. dont know how to fix it either.
EDIT: I want the div to move but also rotate at the same time, forgot to add that.
https://jsfiddle.net/CarelessInternet/4cxgnerv/
(basically showing the problem below a bit, just check the jsfiddle please, thanks)
var transformLeft = false,
transformRight = false,
var computedStyle = window.getComputedStyle(document.getElementById("square")),
transformLeft = parseFloat(computedStyle.transform),
transformRight = parseFloat(computedStyle.transform);
if (transformLeft == true) {
transformLeft = transformLeft + 5;
square.style.transform = 'rotate(' + transformLeft + 'deg)';
} else if (transformRight == true) {
transformRight = transformRight + 5;
square.style.transform = 'rotate(' + transformRight + 'deg)';
}
There are at least two problems with your code:
getComputedStyle returns a CSSStyleDeclaration Object. That means that it consists of all the compute css values of an element. So when you access computedStyle.transform you get a string with the transformation matrix of the element as a result and not a integer or decimal value.
Your usage of transformLeft and transformRight is at least confusing if not wrong. You use them as booleans containing true or false and then at other times integers.
Related
well... for begining, i m building some dumb and easy projects because i'm starting learning the world of front end development. One of those you can find in internet was this Color picker idea. Some page where with a button you can generate a random color. all random, no connections between the colors o something else.
(i'm not a native english speaker so sorry if i write something and you dont get it right)
Here's the link to the repository
so...
I build a function that makes a random HSL color randomizing the values and then building a string and puting that in the css
function getRandomHsl(){
let hueValue = 0;
hueValue = Math.floor(
Math.random() * (360 + 1)
)
let satValue = 0;
satValue = Math.floor(
Math.random() * (100 + 1)
)
let lightValue = 0;
lightValue = Math.floor(
Math.random() * (100 + 1)
)
return 'hsl(' + hueValue + ', ' + satValue + '%, ' + lightValue + '%)';}
if you can give me your opinion on that function and tell me if you would have done it inanother way.
so... i wanted to find the way to if the Lightness would have a low value the color of the font change it to some white or something like that. And this is what i figured out. (the first part of the code is the button changing the value of the background color of the main div. This works well. The problem comes after).
hslBtn.addEventListener('click', () => {
let hslStringComplete = getRandomHsl();
colorShowcase.textContent = hslStringComplete;
document.getElementById('color-container').style.backgroundColor = hslStringComplete;
/*================================= change the color font od the text when its to dark */
let hslLightValue = hslStringComplete;
let lightValue = hslLightValue.toString().substr(13,3).replace(/\D/g,'')
console.log(hslLightValue.substr(13,3).replace(/\D/g,''));
if(lightValue < 40){
innerHTML('input').style.color = "white";
}})
i have really strougle it out coming up with this idea so i want some opinion on how could i have done in other way.
PD: `if(lightValue < 40){
innerHTML('input').style.color = "white";}
this is hte HTML: <input class="background-container"><h3 class="forWhiteColor">Background Color : <span class="color-showcase">#messi</span></h3></input>
this part get me an error and the html doesn get changes. Here's the error.
console error
thanks in advance.
innerHTML('input') should probably be document.getElementById('color-container') instead.
also you should note that when you extract a part of a string, you get a string.
And comparing a string to a number won't work well, you first need to convert your string to a number with parseInt (for integers) or parseFloat (for float)
The following is a line I have in my Javascript code. It outputs -5108024 and some change when sqftVal = 2828 and bathsVal = 3.5.
out.value = -6932000 + 221400 * Math.log(sqftVal) + 637.2*Math.exp(bathsVal) + 51640;
However, when I manually type this in my calculator, I get roughly -5099721 and some change. I get the same result in R. Why does JavaScript mess up the math, and what can I do to fix this?
Calculator/R input:
-6932000 + 221400 * ln(2828) + 637.2 * e^(3.5) + 51640 = -5099721.073
I don't believe this is a floating point error because as I add more terms, the difference becomes fairly large.
Plus, everything was matching up until I added the fourth term (+51640) which made no sense to me.
There must be some other code that is interfering with your values or something, because the code shown does not produce the value you report.
var sqftVal = 2828;
var bathsVal = 3.5;
var value = -6932000 + 221400 * Math.log(sqftVal) + 637.2*Math.exp(bathsVal) + 51640;
console.log(value);
I'm very new to javascript/jQuery so apologies if this is a very basic question.
I have a variable which uses Math.random to select one of 9 potential classes from an array, the classes are the same except with a different number 1-9 at the end. I want to use javascript to check if all elements with this class are hidden. I can get it to check if all divs are hidden when I actually specify the class, but am not sure how to do this with a variable or expression. Below is what I'm using at the moment, which only works when the div is specified.
if ($('div.item9:visible').length == 0)
I assumed something like this would do what I want, but it doesn't seem to work.
if ($(variable + ':visible').length == 0)
EDIT: if ($(variable + ':visible').length == 0) this does work, I had another div on the page with this class which I didn't realise and therefore there was always an unhidden element, thanks for the help everyone.
you can use the same variable in your class name which you have used to select a number from 1-9 for example
var x = Math.floor(Math.random() * (10 - 1) + 1);
this will generate a random integer between 1-10 then you can just add the x in the class name
like this
if ($('div.item'+x+':visible').length == 0)
Cheers !
try this:
var elements = [1,2,3,4,5,6,7,8,9];
function getRandomClassNumber(){
//will give you random index
var index = Math.floor((Math.random()*elements.length));
return (elements[index]);
}
$("#btnRandom").on("click",function(){
var classNumber = getRandomClassNumber();
if($(".item"+classNumber).is(":visible")){
alert("item" + classNumber + " is visible");
}else{
alert("item" + classNumber + " not visible");
}
});
working fiddle here: http://jsfiddle.net/6neFA/
I am not very good at JS and am having a hard time with an IF Else statement regarding the API of Dribbble. I want to render shots that are 800px widths differently then shots that are 400px widths. I can get the API to spit out all of my shots at the same size but I want an if image width = 800 render one way else render another.
Can someone school me in how to fix this mess below.
function larger(fileterLarge){
if(filter.shots[i].width = 800){
function render(filter){
for (var i = 0; i<filter.shots.length;i++){
inner = inner + innerP1 + filter.shots[i].url + innerP2 + filter.shots[i].image_url + innerP3 + filter.shots[i].likes_count + innerP4 + filter.shots[i].comments_count + innerP5 + filter.shots[i].title + innerp6;
}
};
$('.gallery').html(inner);
inner = "";
};
To determine the way you images will render you have to use equality "===" operator instead of assignment "=" operator in your if else statement. Hope this fiddle will help you
Very simple code, very simple problem. When a link is pressed, it moves a div either up or down. However, I cannot get it to move incrementally. I know this is a simple syntax error, but google isn't revealing the error of my ways. Anyone willing to enlighten me?
<a class="galsel" onclick="document.getElementById('innerscroll').style.bottom -='167px';">«</a>
<a class="galsel" onclick="document.getElementById('innerscroll').style.bottom +='167px';">»</a>
I already have it so that the div tiles itself vertically, so I'm not worried about it going "too high" or "too low"
Here's what it looks like right now: drainteractive.com/FBD/projects.php
You have to parse the value from the string containing px
// Increase by 167
document.getElementById('innerscroll').style.bottom = (parseInt(document.getElementById('innerscroll').style.bottom, 10) + 167) + ' px'
// Decrease by 167
document.getElementById('innerscroll').style.bottom = (parseInt(document.getElementById('innerscroll').style.bottom, 10) - 167) + ' px'
// Abstracted
function addToBottom(el, amount) {
// You probably add lower and upper bound check conditions
el.style.bottom = (parseInt(el.style.bottom) + amount) + ' px';
}
var el = document.getElementById('innerscroll');
addToBottom(el, 167);
addToBottom(el, -167);
Also be sure to make it work for cases where bottom wasn't set initially
var currentBottom = parseInt(document.getElementById('innerscroll').style.bottom) || 0;
+='167px' will concatinate it an it will become '167px167px167px167px167px'. Not sure what will result -='167px', but probably will result an error.
You need to rip the 'px' off the string, convert(?) it to an int, then subtract from that.
onclick="var mElem = document.getElementById('innerScroll'); mCur = parseInt(mElem.style.bottom.replace('px', 0)); mElem.style.bottom = (mCur-167)+'px'"
Naturally, this should all be put into a separate function, who is then called in the onclick, rather than the monstrosity above.
function moveUp()
{
var mElem = document.getElementById('innerScroll');
var mCur = parseInt(mElem.style.bottom.replace('px', 0));
mElem.style.bottom = (mCur-167)+'px';
}
...
<strike>onlick="moveUp()"</strike>
onclick="moveUp()"
My mind must have been somewhere else..