2つの文字列をまとめるのではなく、JSに数学を実行させる方法


102

整数変数に5を追加するにはJavaScriptが必要ですが、代わりに変数を文字列として扱い、変数を書き出してから、「文字列」の末尾に5を追加します。代わりに数学を強制する方法はありますか?

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

出力: 55

出力を強制するにはどうすればよい10ですか?


3
この特定の例では、10が出力されます
。– deceze


10
あなたはそれを損なう試みをせずにすべてのコードをダンプすることによってあなたを助けたいと思っている人に過度の負担をかけました。自分でテストしてください... CSS属性を#control使って問題に違いをもたらしますか?そうでない場合は、それらを削除し、表示しないでください。問題の再現に必要な最小限のテストケースが得られるまで、コードを減らし続けます。そうほとんどの時間は発生します、あなたが問題を発見する、プロセスで学びます。自分で解決しないと、簡単な例ですぐに助けが得られるでしょう。
Phrogz、2011年

回答:


108

あなたはラインを持っています

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

ファイルでは、txtの内容が数字に制限されていないため、これはドットを文字列に設定します。

これをintに変換するには、次の行を変更します。

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

注:10ここでは、10進数(base-10)を指定しています。これがないと、ブラウザによっては文字列を正しく解釈できない場合があります。MDN:を参照してくださいparseInt


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

5
parseInt(...、10)また、常に基数を使用...サニティチェック... if(!dots || dot <1)も適切である可能性があります...
Tracker1

1
加算にはインクリメント演算子を使用することをお勧めします。VAR = VAR + 1ではなくVARIABLE ++のように。
gnganpath 2014

53

最も簡単な:

dots = dots*1+5;

ドットは数値に変換されます。


34
それよりもさらに簡単ですdots = +dots+5
Andy E


9

ここには表示されないので、この回答を追加します。

1つの方法は、値の前に「+」文字を置くことです

例:

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

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

注:10in parseInt(number, 10)は10進数(base-10)を指定します。これがないと、ブラウザによっては文字列を正しく解釈できない場合があります。MDN:を参照してくださいparseInt





1

私の特定のケースで成功せずにここでほとんどの答えを試した後、私はこれを思いつきました:

dots = -(-dots - 5);

+記号はjsを混乱させるものであり、これにより完全に排除されます。理解するのが混乱する可能性がある場合は、実装が簡単です。


-3

これが最後に反対投票されたので更新されました...

見ただけ

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

以前は、txtボックスが変数をフィードすることが後で示されましたdots。このため、悪意のあるコードではなく整数のみが含まれていることを確認するために、入力を「クレンジング」する必要があります。

これを行う簡単な方法の1つは、テキストボックスを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 2016年

eval()非常に危険だと思われるため、反対票を投じる場合は、OPが使用していたコンテキストでコードを確認する必要があります。この場合は、テキストボックスからの入力ではない入力や、数値以外の値の注入の可能性がある他のユーザー入力形式を使用しているためです。私はあなたの反対票に反対票を投じることができればいいのに!
vapcguy 2016

別の投票者。ただ羊であるのではなく、自分自身を説明することに気をつけますか?eval()うまくいく場合があり、実際にそれを理解せずに読んだすべてを盲目的に信じるのではなく、それが使用されているコンテキストを見る必要があります!
vapcguy 2016年

1
@ChadLevyわかりました、その点では、あなたは正しいです。私はそのセクションを見ませんでした-私は彼がページの上部に置いたものに焦点を合わせました:コードvar dots = 5 function increase(){ dots = dots+5; }はテキストフィールドを使用せず、ユーザー入力からではなく直接変数を使用して割り当てます。だから私はそれをやめました。しかし、私はあなたが、彼がそのテキストフィールドに割り当てるの権利ということです見txtにしdotsて、dotsグローバル変数であり、そのための入力によって更新されます。あなたが正しい。ありがとう。
vapcguy 2016年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.