3

window.addEventListener("load", cargaPagina1000);

function cargaPagina1000() {
    var btn300 = document.getElementById("1000").addEventListener("click", cambiaValores1000);
}

function cambiaValores1000() {
  var inputNombre = document.getElementById("monto");
  inputNombre.value = "1000";
}

window.addEventListener("load", cargaPagina1500);

function cargaPagina1500() {
  var btn300 = document.getElementById("1500").addEventListener("click", cambiaValores1500);
}

function cambiaValores1500() {
  var inputNombre = document.getElementById("monto");
  inputNombre.value = "1500";
}
.btn, .btn-large, .btn-flat {
  border: none;
  border-radius: 4px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 2rem;
  text-transform: uppercase;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
         

<a class=" btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="1000" id="1000">1000</a>
<a class=" btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="1500" id="1500">1500</a>
<a class=" btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="2000" id="2000">2000</a>
<a class=" btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="2500" id="2500">2500</a>
<a class=" btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="3000" id="3000">3000</a>
<a class=" btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="3500" id="3500">3500</a>
<a class=" btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="4000" id="4000">4000</a>
<a class=" btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="4500" id="4500">4500</a>
<a class=" btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="5000" id="5000">5000</a>
<a class=" btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="6500" id="6500">6500</a>
<a class=" btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="7000" id="7000">7000</a>
<a class=" btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="7500" id="7500">7500</a>
<a class=" btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="8000" id="8000">8000</a>
<a class=" btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="8500" id="8500">8500</a>
<a class=" btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="9000" id="9000">9000</a>
<a class=" btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="9500" id="9500">9500</a>
<a class=" btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="10000" id="10000">10000</a>

<div class="col s12">
  Monto a recargar:&nbsp;&nbsp;
  <input placeholder="Presione monto a recargar" class="solonumero"  name="prioridad" id="monto"  readonly>
</div>

Estoy tratando de hacer una lista de muchos valores a recargar pero me va a llevar una vida asignándole el valor de cada unos de los id para darle el valor al input luego de que presione el boton, mas aun cuando tengo 4 listas mas que contienen los mismos valores, y no puedo usar el mismo Id para mostrar el valor de las demás listas.

¿Cómo podría ahorrar código usando jquery usando un selector, si lo hay, para poder usar todas las listas y que al presionarse los botones se refleje el monto sin conflictos ?

1
  • No te e entendido nada podrias ser mas claro? Y con javascript puro puedes hacer cualquier cosa que hagas con jquery nota no es mas facil un select? Que usar a?
    – Bryro
    el 14 mar. 2019 a las 21:29

1 respuesta 1

2

Puedes hacerlo mucho mas facil con clases asi:

$( document ).ready(function() {
  $(document).on('click', '.presionado', function() {        
    $("#monto").val($(this).attr('value'));
  });
});
.btn, .btn-large, .btn-flat {
  border: none;
  border-radius: 4px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 2rem;
  margin-bottom: .5rem;
  text-transform: uppercase;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>        

<a class="btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="1000">1000</a>
<a class="btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="1500" >1500</a>
<a class="btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="2000" >2000</a>
<a class="btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="2500" >2500</a>
<a class="btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="3000" >3000</a>
<a class="btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="3500" >3500</a>
<a class="btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="4000" >4000</a>
<a class="btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="4500" >4500</a>
<a class="btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="5000" >5000</a>
<a class="btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="6500" >6500</a>
<a class="btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="7000" >7000</a>
<a class="btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="7500" >7500</a>
<a class="btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="8000" >8000</a>
<a class="btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="8500" >8500</a>
<a class="btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="9000" >9000</a>
<a class="btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="9500" >9500</a>
<a class="btn  pulse pagina1 blue darken-1 hvr-pulse presionado" value="10000" >10000</a>

<div class="col s12">
  Monto a recargar:&nbsp;&nbsp;
  <input placeholder="Presione monto a recargar" class="solonumero"  name="prioridad" id="monto"  readonly>
</div>

1
  • 2
    gracias , eso era precisamente lo que estaba por hacer @alanfcm, tu respuesta soliono mi problema,
    – Juan Ortiz
    el 14 mar. 2019 a las 21:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.