JavascriptのMathコードで何が問題になっていますか？

Question

数字のゲームのスライダーです。 50を超えてロールすると、ベット額の* 2が得られます。スライダーを使用すると、賭け金の額を選択できます。

問題1：ただし、ユーザーが勝利した場合、スコアは加算されません。 5,10,15の代わりに05,055,0555が表示されます。 問題2：ベット額もスライダーに対応していません。それはちょうど50か-50を加えます。

var amountBet = document.getElementById("myRange").value; 
 
var originalNumber = 0; 
 

 
function generateNumber() { 
 
    var randomNum = (Math.random() * 100).toFixed(2); 
 
    var pass = 52.5; 
 

 
    if (randomNum > pass) { 
 

 
    var el = document.getElementById('number'); 
 
    el.textContent = originalNumber += (amountBet); 
 
    msg = 'You won! '; 
 

 
    } else { 
 

 
    var el = document.getElementById('number'); 
 
    el.textContent = originalNumber -= (amountBet); 
 
    msg = ' You lost! '; 
 

 
    } 
 

 
    function myFunction() { 
 
    var x = document.getElementById("myRange").value; 
 
    document.getElementById("demo").innerHTML = "Roll Above " + x + " to win"; 
 
    } 
 
}

<div id="demo">Roll Above:</div> 
 

 
<input type="range" id="myRange" min="0" max="100"> 
 
<!-- Slider that should select amount bet --> 
 

 
<div onclick="myFunction()">Click to see amount</div> 
 
<!-- Click to see amount selected on slider --> 
 

 
<button onclick="generateNumber()" type="submit" value="Roll" id="button1" class="button button">Roll above 52.99 for *2</button> 
 
<!-- Button to roll --> 
 

 
<p id="number">0</p> 
 
<!-- Amount of credits user has -->

Answer 1

あなたがそうでなければ、スライダのデフォルト値を取得し、スライダの数値をとるので、関数にamountBetを移動する必要があります。

次に、elを比較の外に移動します。これはどちらの場合も同じであるためです。

後で勝者/敗者のテキストを表示できます。問題の

var amountBet; 
 
var originalNumber = 0; 
 

 
function generateNumber() { 
 
    var randomNum = Math.random() * 100; 
 
    var pass = 52.5; 
 
    var el = document.getElementById('number'); 
 
    amountBet = +document.getElementById("myRange").value; 
 
    if (randomNum > pass) { 
 
     originalNumber += amountBet; 
 
     el.textContent = originalNumber + ' ' + 'You won! '; 
 
    } else { 
 
     originalNumber -= amountBet; 
 
     el.textContent = originalNumber + ' ' + 'You lost! '; 
 
    } 
 
} 
 

 
function myFunction() { 
 
    var x = document.getElementById("myRange").value; 
 
    document.getElementById("demo").innerHTML = "Roll Above " + x + " to win"; 
 
}

<div id="demo">Roll Above:</div> 
 
<input type="range" id="myRange" min="0" max="100"> 
 
<div onclick="myFunction()">Click to see amount</div> 
 
<button onclick="generateNumber()" type="submit" value="Roll" id="button1" class="button button">Roll above 52.99 for *2</button> 
 
<p id="number">0</p>

Answer 2

あなたは数javascript関数を使用して、コードのあなたの最初の行に文字列値を取得した後のコード行を追加してみてください。

var amountBet =document.getElementById("myRange").value;  
var finalBetAmount = Number(amountBet); 

Answer 3

原因：

問題1 =>あなたは、文字列と数値を連結しています。入力フィールドの値は文字列形式になります。

問題2 =>スライダーのデフォルト値は、入力コントロールからの値が関数内で読み取られないたびに取得されます。

対処：

• は、レンジセレクタからNumberに文字列値を変換します。
• 文字列の値をtoFixed(2)からNumberに変換します。 （toFixed関数は文字列出力を生成します）。
• 関数内のスライダ値を取得します。

デバッグコード：

var amountBet; 
var originalNumber =0; 
function generateNumber() { 
    amountBet =Number(document.getElementById("myRange").value); 
    var randomNum = Number((Math.random()*100).toFixed(2)); 
    var pass = 52.5;  
    if (randomNum > pass) 
    { 
      var res = originalNumber+=amountBet; 
      var el = document.getElementById('number'); 
      el.textContent= res; 
      msg = 'You won! '; 
    } 
    else 
    { 
     var el = document.getElementById('number'); 
     var res = originalNumber-=amountBet; 
     el.textContent= res; 
     msg = ' You lost! '; 
    } 
}