Develop Reference

How to solve this JS SyntaxError?

I'm new to JS and I'm trying some stuff to learn it. Here I'm stuck with this SyntaxError. I know it's supposed to point to an identifier starting with a digit, but there's none... So where's the problem ? Could you please help me ?
var mouse = document.getElementById('square');
SyntaxError: identifier starts immediately after numeric literal
div.onmouseover = function() {
var posL = 275;
var posV = 275;
var time = setInterval(move, 2);
function move() {
if ((posL==275)&&(posV==275)){
box.style.left = 275px;
box.style.top = 0px;
posV = 0;
}
}
}

Javascript is trying to parse 275px and 0px as code. It recognizes numbers like 275 as a numerical value but is puzzled by the px attached to it. You should use strings here, in JS they are delimited with ' or ".
Corrected code:
var mouse = document.getElementById('square');
//SyntaxError: identifier starts immediately after numeric literal
div.onmouseover = function() {
var posL = 275;
var posV = 275;
var time = setInterval(move, 2);
function move() {
if ((posL==275)&&(posV==275)){
box.style.left = '275px';
box.style.top = '0px';
posV = 0;
}
}
}

You're missing the qoutes:
box.style.left = "275px";
box.style.top = "0px";
Also, in div.onmouseover you need to define div first or you probably mean mouse.onmouseover

Changing the background color of an element sets websites text to the color

Im trying to make a javascript bookmark using The code I wrote. It's supposed to add an element (in this case it adds a div. The div is as large as the size of innerHeight and innerWidth. The height shrinks by a few pixels every 250 milliseconds. It works on CodePen, but when I try it on another website, it changes the entire HTML of the page to "white" (which is the background color of the added element). Here is the code:
var falseLoaderContainer = document.getElementsByTagName("html")[0];
falseLoaderContainer.innerHTML += `<div id="falseLoader"></div>`;
var falseLoader = document.getElementById("falseLoader");
falseLoader.style.position = `absolute`;
falseLoader.style.width = `${window.innerWidth}px`;
falseLoader.style.height = `${window.innerHeight}px`;
falseLoader.style.bottom = `0px`;
falseLoader.style.left = `0px`;
falseLoader.style.backgroundColor = `white`;
var falseLoaderHeight = falseLoader.style.height.replace(/px/g, "");
var updateFalseLoader = setInterval(function () {
falseLoaderHeight *= 1;
falseLoaderHeight -= Math.ceil(Math.random() * 4);
falseLoader.style.height = falseLoaderHeight + "px";
if (falseLoaderHeight <= 0) {
clearInterval(updateFalseLoader);
}
}, 250);

Try:
var element = document.getElementById("id");
element.setAttribute("style", "background-color: COLOR;");
or:
var element = document.getElementBYId("id");
element.style = "background-color: COLOR;");
Hope this helps!

Opening Div at a specific position

I need to open a div at a specific location on the page. When I focus on a textbox the div should be opened(made visible). I am able to do this part. The problem is it opens right underneath the textbox and when there is no scroll on the page, it creates one. I need help in showing the div above the textbox when there is more space on upper half of the page then the lower half of the page. Here is the JSFiddle I have created and if someone can edit it, it would be of too much help to me.
And this is how I am opening the div:
function openDIV(activatorCtl) {
var leftpos = 0;
var toppos = 0;
var sScrollTop = getScrollTop;
var aTag = activatorCtl;
do {
aTag = aTag.offsetParent;
sScrollTop = (aTag.scrollTop > sScrollTop) ? aTag.scrollTop : sScrollTop;
leftpos += aTag.offsetLeft;
toppos += aTag.offsetTop;
} while (aTag.tagName != 'BODY');
document.getElementById("divDetails").style.left = leftpos + "px";
document.getElementById("divDetails").style.top = toppos + 20 + "px";
document.getElementById("divDetails").style.zIndex = "999";
document.getElementById("divDetails").style.visibility = "visible";
}

You mean like this?
https://jsfiddle.net/36vdoaqo/3/
I added an if for when the toppos is bigger than 250 (your divs height)
if(toppos <= 250)
Another tip:
You use this 4 times in a row:
document.getElementById("divDetails")
save this element in an variable to get shorter statements like:
var detailsDiv = document.getElementById("divDetails");
detailsDiv.style.left = leftpos + "px";
detailsDiv.style.zIndex = "999";
EDIT: i did not save the jsfiddle properly.

Passing a function parameter to change a div style properties

I've been trying to solve this problem: I want to pass a function parameter to select a div so I can change the style.top position with an interval.
var yPos = 0;
var divOne = document.getElementById("div1");
var divTwo = document.getElementById("div2");
var divThree = document.getElementById("div3");
.....
function jump(which){
yPos++;
(which).style.top = yPos + "px";
var jumpTimeOut = setTimeout(jump,100,which);
if(yPos > 500){
clearTimeout(jumpTimeOut);
}
}
jump("divOne");
I could use a switch statement for each div variable, but there is a lot of divs in the program, so I was wondering if there is a way to concatenate the div name with a function parameter. Needles to say I'm getting can't change properties style of NULL with the current code.
Any help is appreciated
---->> I found a solution, I passed the div name string "div1" as parameter inside the function, so I can get the div again with a inside variable:
var divOne = document.getElementById("div1");
var divTwo = document.getElementById("div2");
function jump(which){
var jumpingDiv = document.getElementById(which);
yPos++;
jumpingDiv.style.top = yPos + "px";
var jumpTimeOut = setTimeout(jump,100,which);
if(yPos > 500){
clearTimeout(jumpTimeOut);
}
}
jump("div1");
Odd solution I think, but its working so.. hehe.

Change div's width by a value in JS

How to change div's width by a certain value, like this:
someDiv.style.width += "100px";
It works when I want to set a value (i.e. width = "100px") but the problem is with += operator.

This would work for a vanilla javascript solution (since you didn't mention jquery):
var someDiv = document.getElementById("someDiv");
var w = 0;
if (typeof someDiv.clip !== "undefined") {
w = someDiv.clip.width;
} else {
if (someDiv.style.pixelWidth) {
w = someDiv.style.pixelWidth;
} else {
w = someDiv.offsetWidth;
}
}
someDiv.style.width = (w + 100) + "px";

<div id="test" style="height:100px"></div>
var elem=document.getElementById("test");
height=parseInt(elem.style.height);
height+=100;
height+="px"
console.log(height);
Try the following
http://jsfiddle.net/CME3Y/

That is because Javascript can't understand what "100px" + "100px" means, since those are string values.
I would do it like this using jQuery:
$(someDiv).width($(someDiv).width() + 100);

var currentwidth= $('#div').width();
$('#div').width(currentwidth +100);
http://jsfiddle.net/dolours/CME3Y/1/
Also you can use this https://stackoverflow.com/a/6179629/1479798