Как заставить JS выполнять математику вместо того, чтобы складывать две строки вместе


102

Мне нужен javascript, чтобы добавить 5 к целочисленной переменной, но вместо этого он обрабатывает переменную как строку, поэтому записывает переменную, а затем добавляет 5 в конец «строки». Как я могу заставить его заниматься математикой?

var dots = document.getElementById("txt").value; // 5
function increase(){
    dots = dots + 5;
}

Вывод: 55

Как заставить его выводить 10?


3
Этот конкретный пример выводит 10.
deceze


10
Вы возложили чрезмерное бремя на тех, кто хочет помочь вам, сбросив весь ваш код, не делая никаких попыток его сократить. Проверьте сами ... имеют ли атрибуты CSS какое- #controlлибо значение для вашей проблемы? Если нет, то удалите их и не показывайте нам. Продолжайте сокращать код до тех пор, пока у вас не будет абсолютного минимума тестового примера, необходимого для воспроизведения вашей проблемы. В большинстве случаев это заставит вас найти проблему и учиться в процессе. Если вы не решите ее самостоятельно, то, скорее всего, быстро получите помощь на своем простом примере.
Phrogz

Ответы:


108

У тебя есть линия

dots = document.getElementById("txt").value;

в вашем файле это сделает точки строкой, потому что содержимое txt не ограничено числом.

чтобы преобразовать его в int, измените строку на:

dots = parseInt(document.getElementById("txt").value, 10);

Примечание. 10Здесь указывается десятичная дробь (с основанием 10). Без этого некоторые браузеры могут неправильно интерпретировать строку. См MDN: parseInt.


3
shortcut ... dots = + document.getElementById ("txt"). value
Tracker1

5
parseInt (..., 10) также всегда используйте систему счисления ... проверка работоспособности ... if (! dots || dots <1) тоже может быть в порядке ...
Tracker1

1
Лучше использовать оператор инкремента для сложения. как VARIABLE ++ вместо VAR = VAR + 1;
gnganapath

54

простейший:

dots = dots*1+5;

точки будут преобразованы в числа.


34
Даже проще, чем это было бы dots = +dots+5.
Энди Э


9

Я добавляю этот ответ, потому что не вижу его здесь.

Один из способов - поставить знак "+" перед значением.

пример:

var x = +'11.5' + +'3.5'

х === 15

Я нашел, что это самый простой способ

В этом случае строка:

dots = document.getElementById("txt").value;

можно изменить на

dots = +(document.getElementById("txt").value);

заставить его число

НОТА:

+'' === 0
+[] === 0
+[5] === 5
+['5'] === 5

8

parseInt() должен сделать трюк

var number = "25";
var sum = parseInt(number, 10) + 10;
var pin = number + 10;

Дает тебе

sum == 35
pin == "2510"

http://www.w3schools.com/jsref/jsref_parseint.asp

Примечание: 10в parseInt(number, 10)специфицируешь десятичное (основание-10). Без этого некоторые браузеры могут неправильно интерпретировать строку. См MDN: parseInt.




1

Вы можете добавить + после переменной, и это заставит ее быть целым числом

var dots = 5
    function increase(){
        dots = +dots + 5;
    }

1

Попробовав большинство ответов здесь безуспешно для моего конкретного случая, я пришел к следующему:

dots = -(-dots - 5);

Знаки + - вот что сбивает с толку js, и это полностью их устраняет. Простой в реализации, но может сбивать с толку.


-3

ОБНОВЛЕНО с момента последнего голосования против ....

Я видел только часть

var dots = 5
function increase(){
    dots = dots+5;
}

раньше, но позже мне было показано, что txtполе передает переменную dots. Из-за этого вам нужно обязательно «очистить» ввод, чтобы убедиться, что он содержит только целые числа, а не вредоносный код.

Один из простых способов сделать это - проанализировать текстовое поле с onkeyup()событием, чтобы убедиться, что оно содержит числовые символы:

<input size="40" id="txt" value="Write a character here!" onkeyup="GetChar (event);"/>

где событие выдаст ошибку и очистит последний символ, если значение не является числом:

<script type="text/javascript">
    function GetChar (event){
        var keyCode = ('which' in event) ? event.which : event.keyCode;
        var yourChar = String.fromCharCode();
        if (yourChar != "0" &&
            yourChar != "1" &&
            yourChar != "2" &&
            yourChar != "3" && 
            yourChar != "4" &&
            yourChar != "5" &&
            yourChar != "6" && 
            yourChar != "7" &&
            yourChar != "8" && 
            yourChar != "9")
        {
            alert ('The character was not a number');
            var source = event.target || event.srcElement;
            source.value = source.value.substring(0,source.value-2);
        }
    }
</script>

Очевидно, это можно сделать и с регулярным выражением, но я выбрал ленивый выход.

С тех пор вы знаете, что в поле могут быть только числа, вы можете просто использовать eval():

dots = eval(dots) + 5;

2
eval()опасен, если он dotsпоступает от пользователя, особенно если он от сохраненного ввода. Дополнительная информация
Чад Леви

@ChadLevy Спасибо за ссылку - хорошее прочтение - и за поднятие этого вопроса, но в данном случае беспокойство было необоснованным, так как оно не было введено пользователем. dotsбыла определенной переменной, которая увеличивалась и была ошибочно принята за строку. Поэтому я уточню свой ответ, что его не следует использовать легкомысленно, как вы сказали, из пользовательского / сохраненного ввода, который может иметь потенциал для вредоносной инъекции сценариев. Но также и в этом случае такая инъекция в любом случае вызовет математическую ошибку / исключение, так что в любом случае она ничего не сделает.
vapcguy

Тем, кто голосует против, потому что вы считаете eval()это опасным, вам нужно посмотреть на код в контексте, который использовал OP. В данном случае это не так, потому что он использует ввод, который не поступает из текстового поля или какой-либо другой формы пользовательского ввода, где может быть любая форма введения нечислового значения! Хотел бы я проголосовать против ваших голосов!
vapcguy

Еще один отрицатель. Хотите объясниться, а не просто быть овцой? Бывают случаи, когда eval()все в порядке, и вам нужно смотреть на контекст, в котором он используется, вместо того, чтобы слепо верить всему, что вы читаете, не понимая его на самом деле!
vapcguy

1
@ChadLevy Хорошо, в этом отношении вы правы. Я не смотрел на этот раздел - я сосредоточился на том, что он поместил в верхней части страницы: код var dots = 5 function increase(){ dots = dots+5; }не использует текстовое поле и назначает с использованием прямых переменных, а не ввода пользователем. Вот из чего я пошел. Но я видел , что ты прав , что он назначая это текстовое поле txtдля dotsи dotsявляется глобальной переменной, и поэтому обновляется с помощью этого входа. Ты прав. Спасибо.
vapcguy
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.