Jak zmusić JS do wykonywania obliczeń matematycznych zamiast łączenia dwóch łańcuchów


102

Potrzebuję javascript, aby dodać 5 do zmiennej całkowitej, ale zamiast tego traktuje zmienną jako ciąg, więc zapisuje zmienną, a następnie dodaje 5 na końcu „ciągu”. Jak mogę zmusić go do wykonywania matematyki zamiast tego?

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

Wynik: 55

Jak mogę zmusić go do wyjścia 10?


3
Ten konkretny przykład
daje wynik


10
Złożyłeś nadmierne obciążenie na tych, którzy chcą ci pomóc, przez zrzucenie całego twojego kodu bez prób jego obniżenia. Przetestuj to sam ... czy atrybuty CSS wpływają #controlna Twój problem? Jeśli nie, usuń je i nie pokazuj nam. Kontynuuj redukcję kodu, aż uzyskasz absolutnie minimalny przypadek testowy potrzebny do odtworzenia problemu. W większości przypadków spowoduje to znalezienie problemu i nauczenie się w trakcie tego procesu. Jeśli nie rozwiążesz tego samodzielnie, najprawdopodobniej otrzymasz szybką pomoc z prostym przykładem.
Phrogz

Odpowiedzi:


108

Masz linię

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

w twoim pliku spowoduje to, że kropki będą ciągiem, ponieważ zawartość txt nie jest ograniczona do liczby.

aby przekonwertować go na int, zmień wiersz na:

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

Uwaga: 10Tutaj określa liczbę dziesiętną (podstawa-10). Bez tego niektóre przeglądarki mogą nie zinterpretować poprawnie ciągu znaków. Zobacz MDN: parseInt.


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

5
parseInt (..., 10) również, zawsze używaj podstawy ... sprawdzanie poprawności ... jeśli (! kropki || kropki <1) też mogą być w porządku ...
Tracker1,

1
Lepiej użyj operatora przyrostu dla dodawania. jak VARIABLE ++ zamiast VAR = VAR + 1;
gnganpath

54

najprostszy:

dots = dots*1+5;

kropki zostaną zamienione na liczby.


34
Nawet prostsze niż to byłoby dots = +dots+5.
Andy E,


9

Dodaję tę odpowiedź, ponieważ nie widzę jej tutaj.

Jednym ze sposobów jest umieszczenie znaku „+” przed wartością

przykład:

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

x === 15

Uważam, że to najprostszy sposób

W tym przypadku wiersz:

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

można zmienić na

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

wymusić na liczbie

UWAGA:

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

8

parseInt() powinien załatwić sprawę

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

Daje Ci

sum == 35
pin == "2510"

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

Uwaga: 10in parseInt(number, 10)określa liczbę dziesiętną (podstawa-10). Bez tego niektóre przeglądarki mogą nie zinterpretować poprawnie ciągu znaków. Zobacz MDN: parseInt.



1

to naprawdę proste

var total = (1 * yourFirstVariablehere) + (1 * yourSecondVariablehere)

zmusza to javascript do mnożenia, ponieważ nie ma pomyłki dla * logowania w javascript.


1

Możesz dodać + za zmienną i wymusi to, aby była liczbą całkowitą

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

1

Po wypróbowaniu większości odpowiedzi tutaj bez powodzenia w moim konkretnym przypadku wymyśliłem to:

dots = -(-dots - 5);

Znaki + są tym, co myli js, a to całkowicie je eliminuje. Prosty do wdrożenia, jeśli może być mylący do zrozumienia.


-3

ZAKTUALIZOWANO od czasu ostatniego przegłosowania ....

Widziałem tylko porcję

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

wcześniej, ale później pokazano mi, że txtpudełko podaje zmienną dots. Z tego powodu należy się upewnić, że dane wejściowe zostały „wyczyszczone”, aby mieć pewność, że zawierają tylko liczby całkowite, a nie złośliwy kod.

Jednym prostym sposobem na to jest przeanalizowanie pola tekstowego ze onkeyup()zdarzeniem, aby upewnić się, że zawiera ono znaki numeryczne:

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

gdzie zdarzenie spowodowałoby błąd i wyczyściłoby ostatni znak, jeśli wartość nie jest liczbą:

<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>

Oczywiście możesz to zrobić również za pomocą regex, ale wybrałem leniwe wyjście.

Od tego czasu wiesz, że w pudełku mogą znajdować się tylko liczby, powinieneś móc po prostu użyć eval():

dots = eval(dots) + 5;

2
eval()jest niebezpieczne, jeśli dotspochodzi z danych wejściowych użytkownika, szczególnie jeśli pochodzi z zapisanych danych wejściowych. Więcej informacji
Chad Levy

@ChadLevy Dzięki za link - dobrą lekturę - i poruszenie tego tematu, ale w tym przypadku obawa była nieuzasadniona, ponieważ nie pochodziła od danych wejściowych użytkownika. dotsbyła zdefiniowaną zmienną, która była zwiększana i po prostu mylona z łańcuchem. Więc zakwalifikuję moją odpowiedź, że nie należy jej używać lekko, jak powiedziałeś, z danych wejściowych użytkownika / przechowywanych, które mogą mieć potencjał wstrzyknięcia złych skryptów. Ale także w tym przypadku taki zastrzyk i tak spowodowałby błąd / wyjątek matematyczny, więc i tak naprawdę nic by nie zrobił.
vapcguy

Dla tych, którzy głosują w dół, ponieważ uważasz, że eval()jest to tak niebezpieczne, musisz spojrzeć na kod w kontekście, którego używał OP. W tym przypadku tak nie jest, ponieważ używa danych wejściowych, które nie pochodzą z pola tekstowego ani żadnej innej formy danych wejściowych użytkownika, w której może wystąpić dowolna forma wstrzyknięcia wartości nienumerycznej! Żałuję, że nie mogę przegłosować Twoich głosów przeciw!
vapcguy

Kolejny przeciwnik. Chcesz się wytłumaczyć, zamiast być po prostu owcą? Są chwile, kiedy wszystko eval()jest w porządku i musisz spojrzeć na kontekst, w którym jest używany, zamiast ślepo wierzyć we wszystko, co czytasz, bez faktycznego zrozumienia tego!
vapcguy

1
@ChadLevy Ok, w tej kwestii masz rację. Nie patrzyłem na tę sekcję - skupiłem się na tym, co umieścił na górze strony: kod var dots = 5 function increase(){ dots = dots+5; }nie używa pola tekstowego i przypisuje za pomocą zmiennych bezpośrednich, a nie z danych wejściowych użytkownika. Więc z tego wyszedłem. Ale widziałem, że masz rację, że on przypisanie tego pola tekstowego txtdo dots, i dotsjest zmienną globalną, a więc jest aktualizowany przez tego wejścia. Masz rację. Dzięki.
vapcguy
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.