Tengo un campo de entrada donde el valor cambiará automáticamente cuando se seleccione una opción. ¿Cómo escribir código para que funcione de la misma manera cuando se selecciona la opción de entrada de radio?
function changeIncreaseMode() { let selectMode = $("#selectMode").val(); let multiplier = $("#multiplier").val(); if(selectMode == 'usingMultiplier'){ var increase = (multiplier/100) + 1; } else { var increase = (multiplier - 1) * 100; } $("#multiplier").val(parseFloat(increase).toFixed(2)); } <!DOCTYPE html> <html> <body> <div class="form-group"> <label for="multiplier">Increase on loss:</label> <input type="text" class="form-control" id="multiplier" value="2" placeholder="Enter multiplier" pattern="^\d*(\.\d{0,8})?$" required /> <select id="selectMode" onchange="changeIncreaseMode();"> <option value="usingMultiplier">X</option> <option value="usingPercentage">%</option> </select> </div> <!-- increase using multiplier or percentage --> <div class="custom-control custom-radio custom-control-inline small"> <input type="radio" id="usingMultiplier" name="usingMultiplier" class="custom-control-input" checked> <label class="custom-control-label" for="usingMultiplier">using multiplier <i class="fas fa-times"></i></label> </div> <div class="custom-control custom-radio custom-control-inline small"> <input type="radio" id="usingPercentage" name="usingMultiplier" class="custom-control-input"> <label class="custom-control-label" for="usingPercentage">using percentage <i class="fas fa-percentage"></i></label> </div> <!-- end increase using multiplier or percentage --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </body> </html>y luego también he preparado un código que calculará y mostrará los resultados cuando se haga clic en el botón Enviar. el fragmento de código se ve así:
base_bet = multiplier * base_bet; //increase loss using multiplier/first-code base_bet = multiplier / 100 * base_bet + base_bet; //increase loss using percentage/second-code¿Cómo hacer que cuando se selecciona la primera opción, el cálculo use el primer código, si se selecciona la segunda opción, el cálculo usa el segundo código?
Estoy muy agradecida antes y después.
Será un placer si este código puede ayudarte.
function changeIncreaseMode() { let selectMode = $("#selectMode").val(); let multiplier = $("#multiplier").val(); if(selectMode == 'usingMultiplier'){ var increase = (multiplier/100) + 1; } else { var increase = (multiplier - 1) * 100; } $("#multiplier").val(parseFloat(increase).toFixed(2)); } function changeIncreaseModeByRadio() { const isMultiplier = $("#usingMultiplier").is(':checked'); const isPercentage = $("#usingPercentage").is(':checked'); const multiplier = $("#multiplier").val(); let increase = 0; if(isMultiplier){ increase = (multiplier/100) + 1; } else if(isPercentage){ increase = (multiplier - 1) * 100; } $("#multiplier").val(parseFloat(increase).toFixed(2)); } <!DOCTYPE html> <html> <body> <div class="form-group"> <label for="multiplier">Increase on loss:</label> <input type="text" class="form-control" id="multiplier" value="2" placeholder="Enter multiplier" pattern="^\d*(\.\d{0,8})?$" required /> <select id="selectMode" onchange="changeIncreaseMode();"> <option value="usingMultiplier">X</option> <option value="usingPercentage">%</option> </select> </div> <!-- increase using multiplier or percentage --> <div class="custom-control custom-radio custom-control-inline small"> <input type="radio" id="usingMultiplier" name="usingMultiplier" class="custom-control-input" onChange="changeIncreaseModeByRadio();" checked> <label class="custom-control-label" for="usingMultiplier">using multiplier <i class="fas fa-times"></i></label> </div> <div class="custom-control custom-radio custom-control-inline small"> <input type="radio" id="usingPercentage" name="usingMultiplier" class="custom-control-input" onChange="changeIncreaseModeByRadio();"> <label class="custom-control-label" for="usingPercentage">using percentage <i class="fas fa-percentage"></i></label> </div> <!-- end increase using multiplier or percentage --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </body> </html>