1

I'm trying to figure out how to get my Javascript code to check whether or not a button has been chosen. If it has, I would like to display the button's value.

I have the following HTML:

<li class="control-group">
        <label for="amount" class="control-label">Select an amount</label>
        <div class="controls">
            <div class="btn-group radioButtons amountButtons" data-toggle="buttons-radio">
                @if (Model.PresetValues.Count > 0){
                     foreach (int value in Model.PresetValues) {
                        <button type="button" data-value="@value" class="btn @(Model.chargeViewModel.ChargeAmount == value ? "active" : "")">$@value</button>
                     } 
                }                   
                <button type="button" data-value="other" class="btn toggleDiv toggleOnce" data-toggle-id="#manualAmount">Other</button>
            </div>               
            <input type="hidden" class="radioHidden validate required validateAmount" value="" id="amount" name="ChargeAmount">


        </div>
        <div class="controls hide resize" id="manualAmount">
            <div class="input-prepend input-append">
                <button class="btn minus" type="button"><i class="icon-minus"></i></button>
                <input class="span2 plusminus" data-max="100" data-min="10" data-increment="5" data-value="25" id="manualAmountInput" type="text" value="$25" disabled>
                <button class="btn plus" type="button"><i class="icon-plus"></i></button>
            </div>
        </div>
    </li>

Those are my two options for the button and I would like to edit the following span

<span class="help-block">Your card will automatically reload $<span id="autoAmount">0</span> when your balance is lower than your reload threshold.</span>

I have the following script which I was led to believe will change the value of the span as it is clicked, but I am having a difficult time connecting them together. 

<script>
    javascript: void (document.getElementById("autoAmount").innerHTML = amount);
</script>

if anyone has any suggestions or ideas, it would be greatly appreciated. Thanks!

4

2 回答 2

2

稍微扩展一下kylo的答案......

首先，您需要将单击事件绑定到您的按钮。您可以将其设置为 onClick 属性：

<input type="button" onClick="captureAmount(e); return false;">

在 captureAmount 中包含 'e' 会将 click 事件本身传递给我们的函数，我们可以使用它来确定单击了哪个按钮（如果您在多个地方使用此函数）。

如果您已包含该库，您也可以使用 jQuery 将函数一次附加到页面上的每个按钮。

$('input[type=button]').click(captureAmount(e));

或者，指定具有特定类的按钮..

$('input.amountBtns').click(captureAmount(e));

你的函数可能看起来像这样：

function captureAmount(e){
  var clicked = e.target
  ,   clickedAmount = clicked.value
  ,   display = document.getElementById("autoAmount")
  ;

  display.innerHTML = clickedAmount;
}
于 2013-06-28T14:25:05.383 回答
1

如果您希望在单击按钮时更改 autoAmount 范围的 innerHTML，那么您需要将 onclick 事件绑定到该按钮，然后当 onClick 事件触发时，您会这样做document.getElementById("autoAmount").innerHTML = amount.value

例如，在按钮声明中，您可以添加 onclick="updateAmount()"

然后在脚本标签中声明一个由 onclick 事件调用的 javascript 函数：

    function updateAmount(){
        document.getElementById("autoAmount").innerHTML = document.getElementById("amount").value
    }

（请记住，您的“金额”输入框是隐藏的。）

于 2013-06-27T19:54:37.200 回答