Целые добавляющие как строки в Javascript

Question

У меня есть два текстовых поля ImageWidth и ImageHeight ... я хочу взять входные данные из них, добавить текущую позицию мыши poointer, а затем сделать некоторые вещи:

x = e.pageX - canvas.offsetLeft; 
y = e.pageY - canvas.offsetTop; 
var wWidth = document.getElementById('imageWidth').value; 
var wHeight = document.getElementById('imageHeight').value; 
var b = x + wWidth; 
alert(b); 
if(x+wWidth < 800 && y+wHeight < 1560) 
{ 
//some work here 
} 

так что если пользователь вводит 400 в ширину и х возвращает 151 ... значение b будет 151400 ... тогда как я хочу, чтобы это было 551, чтобы цикл работал правильно ...

Answer 1

Javascript - это язык с неявной типизацией. Это означает, что вы должны сказать ему, что такое вещи, когда вы хотите заниматься математикой. Ваш код просто подсказывает, что он объединяет строки, следовательно, результат, который вы видите.

Попробуйте это:

x = e.pageX - canvas.offsetLeft; 
y = e.pageY - canvas.offsetTop; 
var wWidth = document.getElementById('imageWidth').value; 
var wHeight = document.getElementById('imageHeight').value; 
var b = parseInt(x, 10) + parseInt(wWidth, 10); 
alert(b); 
if(x+wWidth < 800 && y+wHeight < 1560) 
{ 
//some work here 
} 

Answer 2

Вы должны прочитать о методе parseInt() ->parseInt() on MDN

Answer 3

Это должно работать:

x = e.pageX - canvas.offsetLeft; 
y = e.pageY - canvas.offsetTop; 
var wWidth = document.getElementById('imageWidth').value; 
var wHeight = document.getElementById('imageHeight').value; 
var x1 = parseInt(x, 10) + parseInt(wWidth, 10); 
var y1 = parseInt(y, 10) + parseInt(wHeight, 10); 
if(x1 < 800 && y1 < 1560) 
{ 
    //some work here 
}