Как заставить 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.