javascript - tag - Cómo forzar a JS a hacer matemática en lugar de poner dos cadenas juntas
title of page html (7)
ACTUALIZADO ya que esta última fue downvoted ....
Solo vi la porción
var dots = 5
function increase(){
dots = dots+5;
}
antes, pero luego se me mostró que el cuadro de texto alimenta los dots variables. 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 hacerlo es analizar el cuadro de texto con un evento onkeyup() para garantizar que tenga 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, también puedes hacer eso con expresiones regulares, pero yo tomé el camino flojo.
Desde entonces sabría que solo los números podrían estar en la caja, debería poder usar eval() :
dots = eval(dots) + 5;
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 "cadena". ¿Cómo puedo obligarlo a hacer matemáticas en su lugar?
var dots = 5
function increase(){
dots = dots+5;
}
Salidas: 55
¿Cómo puedo forzarlo a producir 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 += "♥ ";
}
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="♥ ♥ ♥ ♥ ♥ "
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>
Esto también funciona para ti:
dots -= -5;
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 esta es la manera más simple
En este caso, la línea:
dots = document.getElementById("txt").value;
podría ser cambiado a
dots = +(document.getElementById("txt").value);
forzarlo a un número
NOTA:
+'''' === 0
+[] === 0
+[5] === 5
+[''5''] === 5
NO parseFloat(); - Usa parseFloat(); si estás lidiando con decimales.
Tienes la linea
dots = document.getElementById("txt").value;
en su archivo, esto establecerá que los puntos sean una cadena porque el contenido de txt no está restringido a un número.
para convertirlo a un int cambie la línea a:
dots = parseInt(document.getElementById("txt").value);
lo más simple:
dots = dots*1+5;
los puntos se convertirán en número.
parseInt() debería hacer el truco
var number = "25";
var sum = parseInt(number) + 10;
var pin = number + 10;
Te dio
sum == 35
pin == "2510"