Sean Sean - 6 months ago 9
Javascript Question

How to force JS to do math instead of putting two strings together

I need javascript to add 5 to an integer variable, but instead it treats the variable as a string, so it write out the variable, then add 5 onto the end of the "string". How can I force it to do math instead?

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


Outputs:
55


How can I force it to output 10?

Could it possibly be an error in my script somewhere?

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

Answer

You have the line

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

in your file, this will set dots to be a string because the contents of txt is not restricted to a number.

to convert it to an int change the line to:

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