1. Inicio
  2. Pregunta y respuesta
  3. Cómo forzar a JS a hacer matemática en lugar de poner dos cadenas juntas

Cómo forzar a JS a hacer matemática en lugar de poner dos cadenas juntas

2011-01-30 19 views
76

Necesito javascript para agregar 5 a una variable entera, pero en cambio trata la variable como una cadena, entonces escribe la variable, luego agrega 5 al final de la "cuerda". ¿Cómo puedo obligarlo a hacer matemáticas en su lugar?Cómo forzar a JS a hacer matemática en lugar de poner dos cadenas juntas

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

Salidas: 55

¿Cómo puedo forzar a la salida 10?

¿Podría ser un error en mi script en alguna 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>

Fuente

2011-01-30 Sean

+3

Este ejemplo particular salidas 10. – deceze

+0

posible duplicado de [Javascript suma de dos números incorrectamente] (http://stackoverflow.com/questions/3638074/javascript-adding-two-numbers-incorrectly); ver [mi respuesta a esa pregunta] (http://stackoverflow.com/questions/3638074/javascript-adding-two-numbers-incorrectly/4600744#4600744) – Phrogz

+5

Ha impuesto una carga excesiva a quienes desean ayudarlo mediante el dumping. todo su código sin hacer ningún intento por reducirlo. Pruébelo usted mismo ... ¿los atributos CSS para '# control' hacen alguna diferencia en su problema? De lo contrario, elimínelos y no nos los muestre. Continúe reduciendo su código hasta que tenga el mínimo de prueba necesario para reproducir su problema. La mayoría de las veces, al hacerlo, usted _you_ encontrará el problema ** y ** aprenderá en el proceso. _Si no lo resuelve usted mismo, es muy probable que obtenga ayuda rápida con su ejemplo simple. – Phrogz

Respuesta

92

Usted tiene la línea

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

en su archivo, esto hará que los puntos a ser una cadena, porque el contenido del txt no se limita a un número.

para convertirlo en un int cambiar la línea a:

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

Fuente

2011-01-30 05:53:24 Alex

+1

atajo de teclado ... puntos = + document.getElementById ("txt"). Valor – Tracker1

+4

parseInt (..., 10) también, siempre use una base ... una comprobación de cordura ... si (! Puntos || puntos <1) también puede estar en orden ... – Tracker1

+1

Mejor uso operador de incremento para la suma. como VARIABLE ++ en lugar de VAR = VAR + 1; – gnganpath

44

el más simple:

dots = dots*1+5;

los puntos se pueden convertir en número.

Fuente

2011-01-30 06:18:46 mier

+24

Incluso más simple que eso sería 'puntos = + puntos + 5'. –

+0

difícil de ver más tarde. – atilkan

15

NO OLVIDE - Use parseFloat(); si trabaja con decimales.

Fuente

2013-09-25 05:38:26 Nicolas

+1

Y no olvide que el flotante no es un tipo de datos decimal http://stackoverflow.com/questions/588004/is-floating-point-math-broken –

-3

actualizado desde esta última downvoted ....

Sólo vi la parte

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

antes, pero posteriormente se ha demostrado a mí que el cuadro txt alimenta la variable dots. Debido a esto, deberá asegurarse de "limpiar" la entrada, para asegurarse de que solo tenga enteros y no código malicioso.

Una manera fácil de hacer esto es para analizar el cuadro de texto con un evento onkeyup() para asegurarse de que tiene caracteres numéricos:

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

donde el evento daría un error y borrar el último carácter si el valor no es un número:

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

Obviamente se podría hacer eso con expresiones regulares, también, pero tomé la salida perezosa.

Desde entonces sabría que sólo los números podrían estar en la caja, usted debería ser capaz de usar sólo eval():

dots = eval(dots) + 5;

Fuente

2016-03-30 14:35:34 vapcguy

+1

'eval()' es peligroso si 'dots' proviene de la entrada del usuario , especialmente si proviene de una entrada almacenada. [Más información] (http://stackoverflow.com/a/13167699/118697) –

+0

@ChadLevy Gracias por el enlace, una buena lectura, y planteando esto, pero en este caso la preocupación no estaba justificada, ya que no era de la entrada del usuario. 'dots' era una variable definida que se estaba incrementando y que solo se confundía con una cadena. Así que califico mi respuesta de que no debe usarse a la ligera, como usted dijo, de la entrada almacenada/usuario que podría tener el potencial de inyección de scripts malvados. Pero también en este caso, tal inyección causaría un error/excepción matemática, de todos modos, por lo que realmente no haría nada, de ninguna manera. – vapcguy

+0

Para aquellos downvoting porque piensas 'eval()' es tan peligroso, necesitas mirar el código en el contexto que el OP estaba usando.No es, en este caso, porque está usando una entrada que no proviene de un cuadro de texto ni de ninguna otra forma de entrada del usuario donde podría haber cualquier forma de inyección de un valor no numérico. ¡Ojalá pudiera rechazar tus votos! – vapcguy

3

Esto también funciona para usted:

dots -= -5;

Fuente

2016-05-28 07:51:51

+0

genial, no tenemos que reescribir la primera var – bormat

1

estoy agregando esta respuesta porque no la veo aquí.

Una forma es poner un carácter '+' delante del valor

ejemplo:

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

x 15 ===

he encontrado que esto es la forma más sencilla

En este caso, la línea:

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

podría cambiarse para

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

para forzarlo a un número

NOTA:

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

Fuente

2017-03-17 12:11:05

Cuestiones relacionadas

 Cuestiones relacionadas