J'ai un formulaire qui après avoir cliqué sur un bouton radio, je veux que quelques entrées de texte apparaissent.

Ça ne marche pas. Rien n'apparaît, la console ne dit rien. Après avoir vérifié que le fichier existe et qu'il s'appelle correctement, j'ai vérifié d'autres JS dans le même document html et cela fonctionne, donc je suppose que quelque chose ne va pas avec la façon dont j'appelle cette fonction.

Voici mon code html:

          <label class="col-md-3">
            <input class="form-check-input" type="radio" name="pagoMedioUtilizado" id="tarjeta" value="tarjeta" addEventListener="return avisoPago.tipoPago();">
            Tarjeta Crédito
          </label>

      <div class="form-group sr-only" id="bloqueOperacion">
        <label class="control-label">Código de la Operación</label>
          <input type="text" name="pagoCodigo" class="form-control" id="ticket" placeholder="Ingrese el número de Operación que está al pie del ticket">
      </div>

Et voici le code JS:

var avisoPago = {
    //obtenemos el valor de email con this.email()
    fecha: function () {    return $('#fecha').val();   },  
    monto: function () {    return $('#monto').val();   },  
    cuentaOrigen: function () { return $('#cuentaOrigen').val();    },  
    sucursal: function () { return $('#sucursal').val();    },  
    ticket: function () {   return $('#ticket').val();  },  

    tipoPago: function() {
        if(document.getElementById('deposito').checked) {
            console.log('se depositó');
            $('#bloqueSucursal').removeClass('sr-only');
            $('#bloqueOperacion').removeClass('sr-only');
            $('#bloqueCuenta').addClass('sr-only');
        }else if(document.getElementById('transferencia').checked) {
            console.log('se transfirió');
            $('#bloqueCuenta').removeClass('sr-only');
            $('#bloqueSucursal').addClass('sr-only');
            $('#bloqueOperacion').addClass('sr-only');
        }else if(document.getElementById('tarjeta').checked) {
            console.log('se pagó con tarjeta');
            $('#bloqueCuenta').addClass('sr-only');
            $('#bloqueSucursal').addClass('sr-only');
            $('#bloqueOperacion').removeClass('sr-only');
        }else if(document.getElementById('efectivo').checked) {
            console.log('se pagó en efectivo');
            $('#bloqueCuenta').addClass('sr-only');
            $('#bloqueSucursal').addClass('sr-only');
            $('#bloqueOperacion').addClass('sr-only');
        }   
    },

Donc, comme vous pouvez le voir, si je clique sur la radio avec l'ID "tarjeta", le contenu de "bloqueOperacion devrait changer de classe. Le sr-only est une classe qui cache le contenu, donc, le truc caché devrait apparaître après avoir supprimé la classe.

Qu'est-ce que je fais mal? Merci!

0
Rosamunda 13 avril 2018 à 00:12

3 réponses

Meilleure réponse

addEventListener n'est pas un attribut, c'est une fonction que vous appelez depuis JS.

Mais puisque vous utilisez jQuery, vous pouvez utiliser sa méthode plus courte:

$(document).ready(function() {
    $("#tarjeta").click(avisoPago.tipoPago);
});
6
Barmar 12 avril 2018 à 21:23

addEventListener n'est pas le bon nom d'attribut. Remplacez-le par onClick

Vous avez confondu la fonction js non intrusive avec l'attribut HTML.

Edit: ce que vous voulez c'est

onClick="avisoPago.tipoPago()"

0
jojois74 12 avril 2018 à 21:21

Je ne suis pas sûr de tout le reste, mais, en remplaçant addEventListener par onclick, en supprimant le return du onclick, en changeant le .getElementById de tipoPago en {{ X5}}, la cible correcte, et en ajoutant un } à la fin de l'objet js que vous avez fourni, le journal de la console fonctionne correctement.

 var avisoPago = {
    //obtenemos el valor de email con this.email()
    fecha: function () {    return $('#fecha').val();   },  
    monto: function () {    return $('#monto').val();   },  
    cuentaOrigen: function () { return $('#cuentaOrigen').val();    },  
    sucursal: function () { return $('#sucursal').val();    },  
    ticket: function () {   return $('#ticket').val();  },  

    tipoPago: function() {
        if(document.getElementById('tarjeta').checked) {
            console.log('se depositó');
            $('#bloqueSucursal').removeClass('sr-only');
            $('#bloqueOperacion').removeClass('sr-only');
            $('#bloqueCuenta').addClass('sr-only');
        }else if(document.getElementById('transferencia').checked) {
            console.log('se transfirió');
            $('#bloqueCuenta').removeClass('sr-only');
            $('#bloqueSucursal').addClass('sr-only');
            $('#bloqueOperacion').addClass('sr-only');
        }else if(document.getElementById('tarjeta').checked) {
            console.log('se pagó con tarjeta');
            $('#bloqueCuenta').addClass('sr-only');
            $('#bloqueSucursal').addClass('sr-only');
            $('#bloqueOperacion').removeClass('sr-only');
        }else if(document.getElementById('efectivo').checked) {
            console.log('se pagó en efectivo');
            $('#bloqueCuenta').addClass('sr-only');
            $('#bloqueSucursal').addClass('sr-only');
            $('#bloqueOperacion').addClass('sr-only');
        }   
    },
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-md-3">
            <input class="form-check-input" type="radio" name="pagoMedioUtilizado" id="tarjeta" value="tarjeta" onclick="avisoPago.tipoPago();">
            Tarjeta Crédito
          </label>

      <div class="form-group sr-only" id="bloqueOperacion">
        <label class="control-label">Código de la Operación</label>
          <input type="text" name="pagoCodigo" class="form-control" id="ticket" placeholder="Ingrese el número de Operación que está al pie del ticket">
      </div>
0
wassona 12 avril 2018 à 21:27