Develop Reference

Why does adding '1' to a variable in javascript add '3'

I've just made two simple functions which I linked to the onClick property of two buttons on a HTML page.
One function looks up the width of a div and then it should just add '1', but instead it adds '3'. The other function looks up the width of a div and then it should subtract '1'. Instead of doing that, it adds '1'
Could someone enlighten me why this happens and show me to correct this?
function bigger() {
var div_kubus = document.getElementById('kubus');
var x = div_kubus.offsetWidth;
var y = parseInt(x) + 1;
var tekst = document.getElementById('tekst');
tekst.value = y;
div_kubus.style.width = y + 'px';
/*div_kubus.setAttribute('style','width:'+y+'px');*/
}
function smaller() {
var div_kubus = document.getElementById('kubus');
var x = div_kubus.offsetWidth;
var tekst = document.getElementById('tekst');
x -= 1;
div_kubus.setAttribute("style", "width:" + x + "px");
tekst.value = x;
}

.offsetWidth will return the width including borders and padding:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetWidth
So I'm assuming that you've probably got a 1px border (or padding) that is adding 2 to your expected width (1px for the left, 1px for the right). Therefore, adding 1, adds 3; and subtracting 1, adds 1.

trouble with comparing strings in javascript

I'm having a weird issue in JS comparing strings. One string is from a user input.
y = data;
document.getElementById("typeThisWord").innerHTML = y;
x = document.getElementById("inputField");
document.getElementById("youTyped").innerHTML = x.value;
first = document.getElementById("youTyped");
second = document.getElementById("typeThisWord");
if(first==second) correct=true;
When the words are the same, it still comes out false. I added in the 'first' and 'second' variables just to see if it would make a difference. Previously I've tried just comparing 'x' to 'y'. I've also tried x.value==y, x==y.value, and x.value==y.value. THe same with 'first' and 'second.' Surprisingly first.value==second.value came out to be true all the time, even when it shouldn't be.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var x, y;
var first, second;
var availV = window.innerHeight - 100;
var availH = window.innerWidth - 100;
var randV, randH;
var correct = new Boolean(); correct=true;
var imageX;
function displayWord() {
if(correct) {
correct=false;
$.ajax({
url: "http://localhost:25578/TypeGood/VisitsSession",
success: function(data) { y = data; },
async: false
});
document.getElementById("typeThisWord").innerHTML = y;
imageX = document.createElement("img");
imageX.src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRPRV4XdE7C9sa0pM-FeXcOSQydg7Sh0INg-ZD6FKZ4wjY8WPHa5Q";
imageX.height = 100;
imageX.width = 100;
imageX.style.position = "absolute";
randV = Math.round( Math.random() * availV );
randH = Math.round( Math.random() * availH );
imageX.style.top = randV + "px";
imageX.style.left = randH + "px";
imageX.style.zIndex = "-20";
document.body.appendChild(imageX);
}
x = document.getElementById("inputField");
document.getElementById("youTyped").innerHTML = x.value;
first = document.getElementById("youTyped").innerHTML;
second = document.getElementById("typeThisWord").innerHTML;
if(first==second) {correct=true;}
x.value = "";
}
</script>

getElementById returns a reference to a DOM element, not a string, so you're not comparing strings, you're comparing DOM elements. Since they're different elements, they aren't ==.
At a minimum, your last three lines should be something like:
first = document.getElementById("youTyped").innerHTML;
second = document.getElementById("typeThisWord").innerHTML;
if(first==second) correct=true;
(E.g., using the innerHTML of the elements, which is a string.) Although I think I'd probably keep the values around in variables rather than going back to the DOM for them.

For Example:
y = data; //data is string value "First"
Change this value to new string "first" >> here f is small
y2 = "first"
Now, When both are of same type, its case sensitive.
if(y==y2)
so values are..
First == first
that will be false.
So make sure of data you are passing in inner html. and make sure you are not adding some white space to it..
I hope this may solve problem. :)
comment back if not solved after modifying the code :)

use this instead of (first==second):
if(first===second)
and retrieve value from html like this:
first = document.getElementById("youTyped").innerHTML;

Javascript - dynamically changing width of an element

There are a few similar questions on Stack but I think mine is the result of some syntax error on my part. Anyway, I'm building a lightbox in javascript and want to dynamically set the absolute position (left % css) to be half of the width of the element.
This is a snippet from the code. Full code is here http://jsfiddle.net/Yab3Q/4/
var modal = document.getElementById(btnId+"-modal");
var modalChildren = modal.childNodes;
for (var x = 0; x<modalChildren.length; x++){
if (!(modalChildren[x].className === "lightBox")){
var childWidth = modalChildren[x].offsetWidth;
var halfWidth = childWidth / 2;
modalChildren[x].style.left = halfWidth + "px";
}
}
The line modalChildren[x].css.left = halfWidth + "px"; is returning "Uncaught TypeError: Cannot set property 'left' of undefined". However, modalChildren[x].className and modalChildren[x].offsetWidth; both return the expected values, so I'm unsure why I can view but not update the css here.

You try to alter the style properties of the following elements:
0: <div>
1: #text
2: <img>
3: #text
You can see this list for yourself by typing
console.log(modalChildren)
since a textNode does not have a style property, an error is thrown

text node has no style property:
log and check:
for (var x = 0; x<modalChildren.length; x++){
console.log(modalChildren[x]);
console.log(modalChildren[x].style);
if (!(modalChildren[x].className === "lightBox")){
var childWidth = modalChildren[x].offsetWidth;
var halfWidth = childWidth / 2;
modalChildren[x].style.left = halfWidth + "px";
}
}
Take a look at node types: http://www.javascriptkit.com/domref/nodetype.shtml

JavaScript Array of arrays: not defined elemnts

I've been developing a canvas application in javascript in which I need to define a 9 cell grid (3x3) and in each grid have a canvas element.
The thing is, I have already an array called grid which has the data to represent the size of each cell.
var grid = new Array();
grid[0] = {x:[0, elemWidth], y:[0, elemHeight]};
grid[1] = {x:[elemWidth, elemWidth*2], y:[0, elemHeight]};
grid[2] = {x:[(elemWidth*2), sWidth], y:[0, elemHeight]};
grid[3] = {x:[0, elemWidth], y:[elemHeight+1,elemHeight*2]};
grid[4] = {x:[elemWidth, elemWidth*2], y:[elemHeight, elemHeight*2]};
grid[5] = {x:[(elemWidth*2), sWidth], y:[elemHeight, elemHeight*2]};
grid[6] = {x:[0, elemWidth], y:[(elemHeight*2), sHeight]};
grid[7] = {x:[elemWidth, elemWidth*2], y:[(elemHeight*2), sHeight]};
grid[8] = {x:[(elemWidth*2), sWidth], y:[(elemHeight*2), sHeight]};
This produces the following output on Chrome Inspector:
As far as I can tell, I should be able to obtain the x and y values by using the following code
canvas[i].fillRect(grid[i].x[0], grid[i].y[0], grid[i].x[1], grid[i].y[1]);
canvas[i].strokeRect(grid[i].x[0], grid[i].y[0], grid[i].x[1], grid[i].y[1]);
and each should give me the corresponding values.
I can't understand why I can get everything OK when on canvas[0] (everything renders on the browser) but when it comes to the subsequent canvas[i](with i>0) won't render and I get an undefined value although the HTML produces the tags for each canvas element.
Am I doing anything wrong declaring the arrays?
EDIT
Made a few changes to the code just for the sake of simplicity and readability:
function createCanvas() {
/* criar grelha aqui */
var sWidth = window.innerWidth; //- 50;
var sHeight = window.innerHeight; //- 50;
var elemWidth = sWidth / 3;
var elemHeight = sHeight / 3;
var grid = new Array();
var row1 = [0, elemHeight];
var row2 = [elemHeight, elemHeight*2];
var row3 = [elemHeight*2, sHeight];
var col1 = [0, elemWidth];
var col2 = [elemWidth, elemWidth*2];
var col3 = [elemWidth*2, sWidth];
grid[0] = [col1, row1];
grid[1] = [col2, row1];
grid[2] = [col3, row1];
grid[3] = [col1, row2];
grid[4] = [col2, row2];
grid[5] = [col3, row2];
grid[6] = [col1, row3];
grid[7] = [col2, row3];
grid[8] = [col3, row3];
for (var i = 0; i < grid.length; i++) {
var c = document.getElementById('content');
var newCanvas = document.createElement('canvas');
newCanvas.setAttribute('id', 'canvas'+i);
c.appendChild(newCanvas);
canvas[i] = new Canvas('canvas'+i, 0, function() {});
canvas[i].clear();
canvas[i].setAutoResize(true);
canvas[i].canvasElement.width = elemWidth - 2;
canvas[i].canvasElement.height = elemHeight - 2;
canvas[i].fillStyle('#000000');
canvas[i].strokeStyle('#FFFFFF');
canvas[i].fillRect(grid[i][0], grid[i][0], grid[i][2], grid[i][3]);
canvas[i].strokeRect(grid[i][0], grid[i][0], grid[i][4], grid[i][5]);
This code is much more complete than the previous version which only had a little bit of the function
Meanwhile I managed to get 3 cells to render (although the 3 cell, which should be 1x3 is actually a 2x1 because somehow the rendering isn't happening properly, which I think might be a CSS problem)
EDIT2
Again I've made some changes to the code above. And new screenshot of the grid array expanded view.

Javascript/Jquery : Mathematically Divide Two Variables

Here's my code:
var frameWidth = 400;
var imageWidth = $('#inner-image').css('width');
var numberOfFrames = imageWidth/frameWidth;
How do I make "numberOfFrames" display as a quotient? I.E. process "frameWidth" and "imageWidth" as numbers, rather than objects?
Let me know if I need to explain myself more clearly. Thanks!

.css('width') is likely returning the value with px. You can use parseInt() to get only the number.
var frameWidth = 400;
var imageWidth = parseInt( $('#inner-image').css('width'), 10);
var numberOfFrames = imageWidth/frameWidth;
The second argument 10 specifies the base that parseInt() should use.
You can also use the width()(docs) method to get the result without the px.
var frameWidth = 400;
var imageWidth = +$('#inner-image').width();
var numberOfFrames = imageWidth/frameWidth;
Here I used the unary + operator to make it a Number instead of a String.