Question

我有一个表单，在单击单选按钮后，我想要显示几个文本输入。

这不起作用。没有任何东西出现，控制台没有说什么。在检查文件是否存在并且它被正确调用之后，我确实检查了同一个html文档中的其他JS并且它确实有效，所以我想我调用该函数的方式有问题。

这是我的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>

这是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');
        }   
    },

所以，正如你所看到的，如果我点击id为“tarjeta”的广播，“bloqueOperacion的内容应该改变类.sr-only是一个隐藏内容的类，所以隐藏的东西应该在删除后出现上课。

我做错了什么？谢谢！

Answer 1

addEventListener不属于某个属性，它是您从JS调用的函数。

但是既然你正在使用jQuery，你可以使用更短的方法：

$(document).ready(function() {
    $("#tarjeta").click(avisoPago.tipoPago);
});

Answer 2

addEventListener是错误的属性名称。将其替换为onClick

您将非侵入性js函数与HTML属性混淆。

编辑：你想要的是

onClick="avisoPago.tipoPago()"

Answer 3

我不确定其他所有内容，但是，将addEventListener替换为onclick，从return删除onclick，更改tipoPago＆＃39; s .getElementById到tarjeta，正确的目标，并在您提供的js对象的末尾添加}，控制台日志正常运行。

＆＃13;

 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');
        }   
    },
    }

＆＃13;

<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>

＆＃13;

addEventListener不起作用？它应该与onclick做点什么

3 个答案: