Come forzare JS a fare matematica invece di mettere insieme due stringhe

Ho bisogno di javascript per aggiungere 5 a una variabile intera, ma invece tratta la variabile come una stringa, quindi scrive la variabile, quindi aggiunge 5 alla fine della "stringa". Come posso costringerlo a fare matematica invece?Come forzare JS a fare matematica invece di mettere insieme due stringhe

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

Uscite: 55

Come posso forzarlo per uscita 10?

Potrebbe essere un errore nel mio script da qualche parte?

<html> 
<head> 
<title>Counting Game</title> 
<style type="text/css"> 
.dot { 
    position: absolute; 
} 
#control { 
    position: absolute; 
    width: 220px; 
    height: 90px; 
    margin-top: -102px; 
    margin-left: -222px; 
    left: 100%; 
    top: 100%; 
    text-align: center; 
    vertical-align: middle; 
    border: 1px dotted #000; 
    padding-top: 10px; 
    background-color: transparent; 
} 
#gameover h1 { 
    font-variant: small-caps; 
} 
#gameover { 
    text-align: center; 
    visibility: hidden; 
} 
#txt { 
    text-align: center; 
} 
body { 
    background-color: #6FF; 
} 
#intro, #gameover { 
    height: 300px; 
    width: 250px; 
    margin-top: -150px; 
    margin-left: -125px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 

} 
#dots { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
} 
</style> 
<script type="text/javascript"> 
var num; 
var digits; 
var size; 
var bsize; 
var bsizew; 
var bsizeh; 
var lvlv; 
var hearts; 
var t; 
var answer = false; 
var lvl=1; 
var oldlvl=1; 
var btn = 2; 
var dots = 5; 
var arrx = []; 
var arry = []; 
var lifestf = true; 
var timertf = true; 
var auto = true; 
var level = 1; 
var life = 4; 
var resetv = false; 

function docload() { 
    document.getElementById("txt").focus(); 
} 

function createdots() { 
    answer = false; 
    document.getElementById("txt").value = "" 
    document.getElementById("txt").focus() 
    document.getElementById("txt").style.color = "#000000" 
    document.getElementById("control").style.backgroundColor = "#6FF" 
    document.body.style.backgroundColor = "#6FF" 
    num = Math.floor(Math.random() * dots) + 1; 
    digits = num.toString().length 
    bsize = Math.min(document.body.clientWidth, document.body.clientHeight); 
    bsizew = document.body.clientWidth; 
    bsizeh = document.body.clientHeight; 
    if ([[bsizeh*bsizew]-[220*90]] > num*num*25000) {size=100} 
    else if ([[bsizeh*bsizew]-[220*90]] > num*num*2500) {size=50} 
    else if ([[bsizeh*bsizew]-[220*90]] > num*num*25*25) {size=25} 
    else {size=10} 
    function createDot(x, y) { 
     var elem = document.createElement("div"); 
     elem.setAttribute("class", "dot"); 
     elem.setAttribute("style", "left:"+ x+"px;top:"+y+"px;"+"width: "+size+"px;"+"height: "+size+"px;"+"background-image: url(dot"+size+".png);"); 
     document.getElementById("dots").appendChild(elem); 
     btn = 1 
     return elem; 
    } 

    function anotherDot() { 
     var x = Math.floor(Math.random() * (bsizew-size)); 
     var y = Math.floor(Math.random() * (bsizeh-size)); 
     ok = true; 
     for (var i in arrx) { 
      if (arrx[i] <= x + size && arrx[i] >= x - size) { 
       ok = false; 
      } 
     } 
     for (var i = 0; i < arry.length; i++) { 
      if (arry[i] <= y + size && arry[i] >= y - size) { 
       ok = false; 
      } 
     } 
     if (x > bsizew-size-220 && y > bsizeh-size-90) {ok = false;} 
     if (ok) { 
      arrx.push(x); 
      arry.push(y); 
      createDot(x, y); 
     } 
     !ok && anotherDot(); 
    } 
    for (var i = 0; i < num; i++) { 
     anotherDot(); 
     document.getElementById("max").innerHTML="Max: "+dots; 
    } 
} 

function resetg() { 
    document.getElementById("txt").style.color = "#000000" 
    document.getElementById("control").style.backgroundColor = "#6FF" 
    document.body.style.backgroundColor = "#6FF" 
    document.getElementById("gameover").style.visibility = "hidden"; 
    document.getElementById("intro").style.visibility = "visible"; 
    document.getElementById("control").style.visibility = "visible"; 
    document.getElementById("life").innerHTML='<label><input id="lifecheck" type="checkbox" checked="true">Lives</label>' 
    document.getElementById("level").innerHTML='<label><input id="autocheck" type="checkbox" checked="true">Auto</label>' 
    document.getElementById("max").innerHTML='' 
    document.getElementById("timer").innerHTML='<label><input id="timercheck" type="checkbox" checked="true">Timer</label>' 
    lvl=1 
    btn = 2; 
    dots = 5; 
    arrx = []; 
    arry = []; 
    lifestf = true; 
    timertf = true; 
    auto = true; 
    level = 1; 
    life = 4; 
    resetv = false; 
    lvlv = ''; 
    document.getElementById("txt").value = "5" 
    document.getElementById("txt").focus() 
} 

function checkanswer() { 
    answer = true; 
    if (document.getElementById("txt").value == arrx.length) { 
     document.getElementById("txt").value = "CORRECT!" 
     document.getElementById("txt").style.color = "#00DD00" 
     document.getElementById("control").style.backgroundColor = "#00FF00" 
     document.body.style.backgroundColor = "#00FF00" 
     btn = 0 
     lvl++; 
    } 
    else if (document.getElementById("txt").value != arrx.length) { 
     document.getElementById("txt").value = "Correct Answer: " + arrx.length 
     document.getElementById("txt").style.color = "#DD0000" 
     document.getElementById("control").style.backgroundColor = "#C00" 
     document.body.style.backgroundColor = "#C00" 
     if (lifetf==true){ 
       hearts = ""; 
       for(i=0;i<life;i++){ 
        hearts += "&#9829; "; 
       } 
     document.getElementById("life").innerHTML = hearts; 
     life--; 
     } 
     btn = 0 
     lvl > 1 && lvl--; 
     if (lvl == oldlvl + 5) { 
      oldlvl = lvl; 
      dots = dots+5; 
     } 
     else if (lvl < oldlvl) { 
      oldlvl = lvl - 5; 
      dots = dots+5; 
     } 
     if (life<0){ 
      lvlv="wtfiswrongwithyou" 
     } 
    } 
} 

function submitenter() { 
    var keycode = window.event.keyCode; 
    if (keycode == 13) { 
     !resetv && btnclick(); 
     resetv && resetg(); 
    } 
    if (keycode < 47 || keycode > 58 || answer) { 
     return false; 
    } 
} 

function quickanswer() { 
    if (auto == true && document.getElementById("txt").value.length == digits) { 
     document.getElementById("dots").innerHTML = "" 
     arrx = []; 
     arry = []; 
     createdots() 
    } 
} 

function btnclick() { 
    if (btn == 1) { 
     checkanswer() 
    } 
    else if (btn == 2) { 
     lifetf = document.getElementById("lifecheck").checked; 
     timertf = document.getElementById("timercheck").checked; 
     auto = document.getElementById("autocheck").checked; 
     dots = document.getElementById("txt").value; 
     document.getElementById("life").innerHTML="&#9829; &#9829; &#9829; &#9829; &#9829; " 
     document.getElementById("level").innerHTML=lvl 
     document.getElementById("max").innerHTML=dots 
     document.getElementById("intro").style.visibility= "hidden" 
     btn = 0; 
     document.getElementById("txt").value = "" 
     document.getElementById("txt").focus() 
     btnclick(); 
    } 
    else if (lvlv != "wtfiswrongwithyou") { 
     document.getElementById("dots").innerHTML = "" 
     arrx = []; 
     arry = []; 
     createdots(); 
     if (timertf==true) { 
      clearTimeout(t) 
      timer(2, 0) 
     } 
     document.getElementById("level").innerHTML=lvl 
    } 
    else { 
     document.getElementById("dots").innerHTML = "" 
     arrx = []; 
     arry = []; 
     document.getElementById("txt").value = "" 
     document.getElementById("txt").focus() 
     document.getElementById("txt").style.color = "#C00" 
     document.getElementById("control").style.backgroundColor = "#C00" 
     document.body.style.backgroundColor = "#C00" 
     document.getElementById("gameover").style.visibility = "visible"; 
     document.getElementById("intro").style.visibility = "hidden"; 
     document.getElementById("control").style.visibility = "hidden"; 
     resetv=true; 
    } 
} 

function timer(s,ms) { 
    if (lvlv != "wtfiswrongwithyou") { 
     milisec = ms 
     seconds = s 

     function display() { 
      if (milisec <= 0) { 
       milisec = 9 
       seconds -= 1 
      } 
      if (seconds <= -1) { 
       milisec = 0 
       seconds += 1 
      } else 
      milisec -= 1 
      document.getElementById("timer").innerHTML = "Time: " + seconds + "." + milisec 
      if (seconds != 0 || milisec != 0) { 
       t = setTimeout(display, 100) 
      } 
      if (seconds == 0 && milisec == 0) { 
       btnclick() 
      } 
     } 
     display() 
    } else { 
     document.getElementById("timer").innerHTML = "" 
    } 
} 
</script> 
</head> 

<body onLoad="docload()" onKeyPress="return submitenter()" > 
<div id="dots"></div> 
<div id="gameover"><h1>Game Over</h1>Would you like to play again?<br><br><br><input type="button" value="OK" onClick="resetg()"></div> 
<div id="intro">Count all the dots that appear on screen as fast as possible and enter the number below. The point of this game is not to count each individual dot, but rather to immediately know exactly how many dots are apparent.<br> 
<br> 
<br> 
Please select what the maximum number of dots should appear when you begin:</div> 
<div id="control"> 
<input id="txt" type="text" value="5"/> 
<input type="button" onClick="btnclick()" value="OK"/><br> 
<center><table width="200"> 
    <tr> 
    <td align="left" valign="middle"><span id="life"><label><input id="lifecheck" type="checkbox" checked="true">Lives</label></span></td> 
    <td align="right" valign="middle"><span id="timer"><label><input id="timercheck" type="checkbox" checked="true">Timer</label></span></td> 
    </tr> 
    <tr> 
    <td align="left" valign="middle"><span id="level"><label><input id="autocheck" type="checkbox" checked="true">Auto</label></span></td> 
    <td align="right" valign="middle"><span id="max"></span></td> 
    </tr> 
</table></center> 
</div> 
</body> 
</html>

fonte

2011-01-30 Sean

Questo particolare esempio uscite 10. – deceze

possibile duplicato [JavaScript aggiunta di due numeri errato] (http://stackoverflow.com/questions/3638074/javascript-adding-two-numbers-incorrectly); vedi [la mia risposta a questa domanda] (http://stackoverflow.com/questions/3638074/javascript-adding-two-numbers-incorrectly/4600744#4600744) – Phrogz

Hai posto un peso eccessivo a coloro che vogliono aiutarti scaricando tutto il tuo codice senza fare alcun tentativo di abbatterlo. Provalo tu stesso ... gli attributi CSS per '# control' fanno la differenza sul tuo problema? In caso contrario, cancellali e non mostrarli a noi. Continua a ridurre il codice fino a quando non hai il minimo di test necessario per riprodurre il tuo problema. La maggior parte delle volte ciò causerà _you_ a trovare il problema ** e ** durante l'apprendimento. _Se non lo risolvi da solo, è molto probabile che tu riceva un aiuto rapido con il tuo semplice esempio._ – Phrogz

avete la linea di

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

nel file, questo sarà impostato punti per essere una stringa, perché il contenuto di TXT non è limitata ad un numero.

per convertirlo in un int cambiare la linea a:

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

fonte

2011-01-30 05:53:24 Alex

scorciatoia ... punti = + documento.getElementById ("txt"). Valore – Tracker1

parseInt (..., 10) inoltre, usa sempre una radix ... un controllo di integrità ... se (! Dots || punti <1) può essere anche in ordine ... – Tracker1

Operatore di incremento di utilizzo migliore per l'aggiunta. come VARIABLE ++ invece di VAR = VAR + 1; – gnganpath

la più semplice:

dots = dots*1+5;

i punti saranno convertiti in numero.

fonte

2011-01-30 06:18:46 mier

+24

Ancora più semplice di quello sarebbe 'punti = + punti + 5'. –

difficile da vedere più tardi. – atilkan

NON DIMENTICARE - Utilizzare parseFloat(); se si tratta di decimali.

fonte

2013-09-25 05:38:26 Nicolas

E non dimenticare che float non è un tipo di dati decimale http://stackoverflow.com/questions/588004/is-floating-point-math-broken –

parseInt() dovrebbe fare il trucco

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

Ti dà

sum == 35 
pin == "2510"

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

fonte

2013-12-19 23:21:48

-3

AGGIORNATO dato che questa era ultima downvoted ....

ho visto solo la parte

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

prima, ma è stato poi dimostrato a me che la casella txt alimenta la variabile dots. Per questo motivo, è necessario assicurarsi di "ripulire" l'input, per assicurarsi che contenga solo numeri interi e non codici maligni.

Un modo semplice per farlo è quello di analizzare la casella di testo con un evento onkeyup() per assicurarsi che ha caratteri numerici:

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

dove l'evento darebbe un errore e cancellare l'ultimo carattere se il valore non è un numero:

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

Ovviamente si poteva fare anche con regex, ma ho preso la via pigra.

Da allora si sa che solo i numeri potrebbero essere in scatola, si dovrebbe essere in grado di utilizzare solo eval():

dots = eval(dots) + 5;

fonte

2016-03-30 14:35:34 vapcguy

'eval()' è pericoloso se 'puntis' viene dall'input dell'utente , in particolare se proviene da input memorizzati. [Maggiori informazioni] (http://stackoverflow.com/a/13167699/118697) –

@ChadLevy Grazie per il link - una buona lettura - e la presentazione, ma in questo caso la preoccupazione era ingiustificata, dal momento che non era dall'input dell'utente. 'punti 'era una variabile definita che veniva incrementata e appena scambiata per una stringa. Quindi qualificherò la mia risposta che non dovrebbe essere usato alla leggera, come hai detto tu, da input utente/memorizzati che potrebbero avere il potenziale per l'iniezione di script malvagi. Ma anche in questo caso, un'iniezione del genere causerebbe comunque un errore/un'eccezione di matematica, quindi in realtà non farebbe niente, in entrambi i casi. – vapcguy

Per quelle downvoting perché pensate che 'eval()' sia così pericoloso, è necessario guardare il codice nel contesto in cui l'OP stava usando.Non è, in questo caso, perché sta usando un input che non proviene da una casella di testo o da qualsiasi altra forma di input dell'utente dove potrebbe esserci una qualsiasi forma di iniezione di un valore non numerico! Vorrei poter downvotare i tuoi downvotes! – vapcguy

Questo funziona anche per voi:

dots -= -5;

fonte

2016-05-28 07:51:51

great non è necessario riscrivere la prima var – bormat

Sono aggiungendo questa risposta perché non la vedo qui.

Un modo è quello di mettere un carattere '+' davanti al valore di

esempio:

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

x === 15

ho trovato che questo è il modo più semplice

In questo caso, la linea:

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

potrebbe essere sostituito con

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

per forzarlo a un numero

NOTA:

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

fonte

2017-03-17 12:11:05

Come forzare JS a fare matematica invece di mettere insieme due stringhe

risposta

Problemi correlati