Poniższe informacje mogą być przydatne ogólnie.
Po pierwsze, pola formularza HTML są ograniczone do tekstu . Dotyczy to zwłaszcza pól tekstowych, nawet jeśli zadbałeś o to, aby wartość wyglądała jak liczba.
Po drugie, JavaScript, lepiej lub gorzej, przeciążył +
operatora dwoma znaczeniami: dodaje liczby i łączy ciągi znaków. Preferuje konkatenację, więc nawet wyrażenie takie 3+'4'
będzie traktowane jako konkatenacja.
Po trzecie, JavaScript będzie próbował dynamicznie zmieniać typy, jeśli będzie to możliwe i jeśli zajdzie taka potrzeba. Na przykład '2'*'3'
zmieni oba typy na liczby, ponieważ nie można pomnożyć ciągów. Jeśli jeden z nich jest niezgodny, otrzymasz NaN
: Nie liczba.
Twój problem występuje, ponieważ dane pochodzące z formularza są traktowane jako ciąg znaków, a +
dlatego też zostaną połączone, a nie dodane.
Podczas odczytywania rzekomo numerycznych danych z formularza należy zawsze przepychać je przez parseInt()
lubparseFloat()
, w zależności od tego, czy chcesz liczbę całkowitą czy dziesiętną.
Zauważ, że żadna funkcja naprawdę nie konwertuje ciągu na liczbę. Zamiast tego będzie analizować ciąg od lewej do prawej, aż dojdzie do nieprawidłowego znaku numerycznego lub do końca i przekształci to, co zostało zaakceptowane. W przypadkuparseFloat
, który obejmuje jeden przecinek dziesiętny, ale nie dwa.
Wszystko po poprawnym numerze jest po prostu ignorowane. Zawodzą, jeśli ciąg nie zaczyna się nawet od liczby. Wtedy dostaniesz NaN
.
Dobra technika ogólnego zastosowania dla liczb z formularzy jest mniej więcej taka:
var data=parseInt(form.elements['data'].value); // or parseFloat
Jeśli jesteś przygotowany na połączenie niepoprawnego ciągu do 0, możesz użyć:
var data=parseInt(form.elements['data'].value) || 0;