2011-01-30 30 views
76

Tôi cần javascript để thêm 5 vào một biến số nguyên, nhưng thay vào đó nó xử lý biến như một chuỗi, vì vậy nó ghi ra biến, sau đó thêm 5 vào cuối của "chuỗi". Làm thế nào tôi có thể buộc nó để làm toán học thay vào đó?Làm thế nào để buộc JS làm toán thay vì đặt hai chuỗi lại với nhau

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

Đầu ra: 55

Làm thế nào tôi có thể buộc nó đến sản lượng 10?

Có thể đó có phải là lỗi trong tập lệnh của tôi ở đâu đó không?

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

ví dụ cụ thể này kết quả đầu ra 10 – deceze

+0

thể trùng lặp của [Javascript thêm hai số sai] (http://stackoverflow.com/questions/3638074/javascript-adding-two-numbers-incorrectly); xem [câu trả lời của tôi cho câu hỏi đó] (http://stackoverflow.com/questions/3638074/javascript-adding-two-numbers-incorrectly/4600744#4600744) – Phrogz

+5

Bạn đã đặt gánh nặng quá mức lên những người muốn giúp bạn bằng cách bán phá giá tất cả các mã của bạn mà không thực hiện bất kỳ cố gắng để pare nó xuống. Tự mình kiểm tra ... các thuộc tính CSS cho '# control' có tạo ra bất kỳ sự khác biệt nào về vấn đề của bạn không? Nếu không, hãy xóa chúng và không hiển thị chúng cho chúng tôi. Tiếp tục giảm mã của bạn cho đến khi bạn có trường hợp thử nghiệm tối thiểu tuyệt đối cần thiết để tái tạo sự cố của bạn. Hầu hết thời gian làm như vậy sẽ khiến _you_ tìm ra vấn đề ** và ** tìm hiểu trong quy trình. _Nếu bạn không tự giải quyết, thì bạn rất có khả năng nhận trợ giúp nhanh chóng với ví dụ đơn giản của bạn._ – Phrogz

Trả lời

92

Bạn có dòng

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

trong tập tin của bạn, điều này sẽ thiết lập dấu chấm để được một chuỗi vì nội dung của txt không bị hạn chế đối với một số.

để chuyển nó sang một int thay đổi dòng để:

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

phím tắt ... dots = + document.getElementById ("txt") .giá trị – Tracker1

+4

parseInt (..., 10) Ngoài ra, luôn luôn sử dụng một cơ số ... một kiểm tra sanity ... nếu (dấu chấm | | dấu chấm <1) có thể theo thứ tự quá ... – Tracker1

+1

Toán tử tăng sử dụng tốt hơn cho Bổ sung. như VARIABLE ++ thay vì VAR = VAR + 1; – gnganpath

44

đơn giản nhất:

dots = dots*1+5; 

các dấu chấm sẽ được chuyển đổi sang số.

+24

Thậm chí đơn giản hơn sẽ là 'chấm = + chấm + 5'. –

+0

khó xem sau. – atilkan

15

KHÔNG QUÊN - Sử dụng parseFloat(); nếu bạn xử lý số thập phân.

+1

Và đừng quên rằng float không phải là một kiểu dữ liệu thập phân http://stackoverflow.com/questions/588004/is-floating-point-math-broken –

-3

CẬP NHẬT vì đây là downvoted cuối cùng ....

Tôi chỉ thấy phần

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

trước đó, nhưng sau đó nó được hiển thị cho tôi rằng hộp txt cấp nguồn biến dots. Bởi vì điều này, bạn sẽ cần phải chắc chắn để "làm sạch" đầu vào, để chắc chắn nó chỉ có số nguyên, và không phải mã độc hại.

Một cách dễ dàng để làm điều này là để phân tích hộp với một sự kiện onkeyup() để đảm bảo nó có ký tự số:

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

nơi sự kiện này sẽ cung cấp cho một lỗi và xóa ký tự cuối cùng nếu giá trị không phải là một số:

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

Rõ ràng bạn cũng có thể làm điều đó với regex, nhưng tôi đã thực hiện một cách lười biếng.

Kể từ đó bạn sẽ biết rằng chỉ số có thể là trong hộp, bạn sẽ có thể chỉ cần sử dụng eval():

dots = eval(dots) + 5; 
+1

'eval()' là nguy hiểm nếu 'dấu chấm' là từ đầu vào của người dùng , đặc biệt nếu nó từ đầu vào được lưu trữ. [Thông tin thêm] (http://stackoverflow.com/a/13167699/118697) –

+0

@ChadLevy Cảm ơn bạn đã liên kết - đọc tốt - và đưa điều này lên, nhưng trong trường hợp này, mối quan ngại là không chính đáng, vì nó không từ đầu vào của người dùng. 'dots' là một biến được định nghĩa đang được tăng lên và chỉ bị nhầm lẫn với một chuỗi. Vì vậy, tôi sẽ đủ điều kiện trả lời của tôi rằng nó không nên được sử dụng nhẹ, như bạn đã nói, từ người dùng/đầu vào được lưu trữ mà có thể có tiềm năng cho tiêm script ác. Nhưng cũng trong trường hợp này, tiêm như vậy sẽ gây ra một lỗi toán học/ngoại lệ, anyway, do đó, nó thực sự sẽ không làm bất cứ điều gì, một trong hai cách. – vapcguy

+0

Đối với những downvoting vì bạn nghĩ rằng 'eval()' là rất nguy hiểm, bạn cần phải nhìn vào mã trong bối cảnh OP được sử dụng.Nó không phải là, trong trường hợp này, bởi vì anh ta sử dụng đầu vào mà không đến từ một hộp văn bản hoặc bất kỳ hình thức đầu vào người dùng khác, nơi có thể có bất kỳ hình thức tiêm một giá trị không phải số! Tôi muốn tôi có thể downvote downvotes của bạn! – vapcguy

3

này cũng làm việc cho bạn:

dots -= -5; 
+0

tuyệt vời, chúng tôi không phải viết lại var đầu tiên – bormat

1

Tôi thêm câu trả lời này bởi vì tôi không thấy câu trả lời ở đây.

Một cách là đưa một nhân vật '+' ở phía trước của giá trị

dụ:

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

x === 15

Tôi đã thấy điều này là cách đơn giản nhất

Trong trường hợp này, dòng:

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

có thể được thay đổi để

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

để buộc nó vào một số

LƯU Ý:

+'' === 0 
+[] === 0 
+[5] === 5 
+['5'] === 5 
Các vấn đề liên quan