Проверьте, изменилась ли кнопка в Javascript?

Question

Я пытаюсь выяснить, как получить код Javascript, чтобы проверить, выбрана ли кнопка. Если это так, я хотел бы отобразить значение кнопки.

У меня есть следующий 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> 

Это мои два варианта кнопки, и я хотел бы отредактировать следующую 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> 

Я следующий сценарий, который я светодиодная полагать, изменит значение пролета по мере его нажатия, но мне сложно связать их вместе.

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

Если у кого есть предложения или идеи, было бы весьма полезно. Спасибо!

Answer 1

Чтобы расширить на ответ Kyllo это немного ...

Сначала вам нужно будет привязать событие щелчка на кнопке , Вы можете установить его как атрибут OnClick:

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

Включая «е» внутри captureAmount пройдет само событие щелчка к нашей функции, которую мы можем использовать, чтобы выяснить, какая кнопка была нажата (если вы используете эта функция более чем в одном месте).

Вы также можете использовать 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; 
} 

Answer 2

Если вы хотите innerHTML пролета autoAmount изменить при нажатии на кнопку, то вам нужно будет привязать событие OnClick к этой кнопке, а затем, когда срабатывает событие OnClick, вы могли бы сделать document.getElementById("autoAmount").innerHTML = amount.value

например, в объявлении кнопки вы можете добавить onclick="updateAmount()"

, а затем внутри тегов сценария вы бы объявить яваскрипт функцию, которая вызывается OnClick события:

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

(Имейте в виду, что ваша «сумма» поле ввода скрыт, однако.)