输入按钮onclick的值

时间:2017-02-02 07:34:42

标签: javascript jquery html css

该剧本适用于赌博游戏。用户输入投注和数量从2,3,5,50。 如果车轮旋转,并且车轮上的数字等于该数字,则用户获得下注*号码。

示例:用户投注100个积分并下注2.轮子旋转,如果落在2,用户获得100 * 2积分。

我如何从输入2,3,5,50改为输入,分别改为“下注2”,“下注3”。

我当前的问题:只要提供有效的投注和数字,当轮子旋转时,用户就会进入每一轮。使用按钮,用户可以选择何时下注(通过点击按钮)

检查一下: http://codepen.io/hokaien/pen/RKjPbZ

if ( options[index] === wantTo ) {
// if options[index] equals to number
    var el = document.getElementById('number');
    var res = originalNumber += (amountBet * wantTo);
    el.textContent = res;
    finalMsg = " You won " + (amountBet * wantTo) + " credits";
  } else if (test3 != "2" || test3 != "3" || test3 != "5" || test3 != "50") {
    finalMsg = " Number should be from 2, 3, 5, 50 ";
  } else if (amountBet > originalNumber) {
    finalMsg = " Not enough credits ";
  } else if (amountBet < 0) {
    finalMsg = " Cannot bet negative ";
  }

4 个答案:

答案 0 :(得分:0)

如果使用jQuery,您可以使用.isNumeric()检查输入是否为数字。

var result=$.isNumeric(txtInput.val());

检查点击的按钮值

var result=$.isNumeric(btnClickedButton.val());

或者

$(".btnNumber2").click(function(){
    var result=$.isNumeric($(this).val());
    alert(result);
});

更新的答案

<强> HTML

<input type='button' class='myButton' value="bet on 2" data-val="2" />
<input type='button' class='myButton' value="bet on 3" data-val="3"  />
<input type='button' class='myButton' value="bet on 5" data-val="5"  />
<input type='button' class='myButton' value="bet on 50" data-val="50"  />

<强> JS

var clickedScore=0;
$(".myButton").click(function(){
    var btn=$(this);
    clickedScore=btn.attr("data-val");
});

function CheckIfClickedButtonValueEqualsWheelNumber() //HAVE TO MAKE IT LONG
{
    if(parseInt(clickedScore)==YOUR_NUMBER_FROM_WHEEL){
    {
        //YOUR EXISTING LOGIC, NOT REPEATING IT HERE
    }
}

答案 1 :(得分:0)

实施例

$(function() {
  $('#btn').click(function() {
  var data = $(this).val();
  if(isNaN(data) == false)
   {
       alert('this is numeric');
   }
   else
   { 
     alert('Not a numbre');
   }
  
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<input type="button" id="btn" value="2" >

答案 2 :(得分:0)

您可以获取按钮的文本

假设您有四个按钮

<input type='button' class='myButton' value="2" />
<input type='button' class='myButton' value="3" />
<input type='button' class='myButton' value="5" />
<input type='button' class='myButton' value="50" />

您可以轻松检查值是否为数字

$('input.myButton').click(function(){
    var btn = $(this)
    var btnValue = btn.val();
    var isNum = $.isNumeric(btnValue);
});

如果您的按钮定义为<button type="button">[num]</button那么您可以btn.text()取代btn.val()

答案 3 :(得分:0)

Here you go (codepen)

HTML添加:

<input type='button' class='betButton' value="2"/>
<input type='button' class='betButton' value="3"/>
<input type='button' class='betButton' value="5"/>
<input type='button' class='betButton' value="50"/>

还删除了数字输入

JS添加(jQuery):

此代码处理点击并设置 currentBet 的值,为了清晰起见,它还为玩家的选择添加了一个名为 selected 的类

$('.betButton').click(function() {
    currentBet = $(this).val();
    $(this).addClass("selected");
    $('.betButton').not(this).removeClass("selected");
});

JS编辑:

将引用替换为旧数字输入并将其替换为 currrentBet ...受感染的变量为: wantTo test2 TEST3

替换了用

旋转时用于禁用/启用输入的代码
$( ".betButton" ).prop( "disabled", true )

$( ".betButton" ).prop( "disabled", false )

禁用并启用下注按钮

CSS添加:

input.betButton {
  border: none;
  background: white;
  color: black;
  border-radius: 5px;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
}
input.betButton:disabled {
 opacity: 0.4;
}
input.betButton.selected {
  background: red;
  color: white;
  transition: 0.5s;
}