Develop Reference

Isolating a part of a string

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)

JavaScript Math Expression Yields Different Results

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);

unable to rotate a div in javascript

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.

Javascript loop either not running or not ending

I want to start with a large number in a variable, and while it is larger than another number, subtract 100 from the variable. I then want the loop to put the variable in the "demo" paragraph, which should end up being 89. Any help is appreciated.
var x = 789
while x > 100 {
x = x-100
}
document.getElementById("demo").innerHTML = x;
<p id="demo"></p>

Your while condition must be wrapped in parentheses.
var x = 789
while (x > 100) {
x = x-100
}
document.getElementById("demo").innerHTML = x;
<p id="demo"></p>

Using parenthesis in the while will fix your problem, just a small syntactical error
var x = 789
while (x > 100) {
x = x-100
}

try this,
function sub(x){
while(x > 100){
x = x-100
}
return x
}
document.getElementById("demo").innerHTML = sub(789);

Uhm - ok - I am really really really rusty at programming, but... you want to generate a predetermined static number and place that static number in a static html element programmatically? WTF man?
<p id="demo">89</p>
Is your solution.
No Javascript req'd. Unless you were hoping for a 'countdown' effect which:
1) Wont work with this code.
2) Wont work with corrected code.
3) Would work with a different methodology so fast you wont see it (you would have to introduce 'sleep' timers and so on).
It's been a bad day please don't take a picture.

I want to obtain a certain part of text from a large webpage using Javascript, how do I?

There is a certain webpage which randomly generates a number, for example "Frequency : 21". I am trying to create a script which takes the number, 21, and compares it to another variable, then to an if else function. Basically, I've completed most of it, but I can't obtain the number 21. And since it is random, I can't put in a fixed value.
Can anyone help me out?
My code goes like:
setTimeout(MyFunction,5000)
function MyFunction(level,legmin) {
var level = x
var legmin = 49
if (level <= legmin) {
location.reload(true)
}
else {
alert("Met requirements.")
}
where the address of the text I want is:
html>body>div#container>div#contentContainer>div#content>
div#scroll>div#scrollContent>div>div>div#pkmnappear>form>p (x in the code above).

A quick-n-dirty solution without regex.
var lookFor = "Frequency : ";
var text = document.querySelector("#pkmnappear>form>p").textContent;
var level = text.substr(text.indexOf(lookFor) + lookFor.length).split(" ")[0];
This assumes the number will be followed by a space