AddEventListener не работает? Он должен что-то делать с onclick
У меня есть форма, в которой после нажатия на переключатель я хочу, чтобы появилась пара текстовых полей.
Это не работает. Ничего не появляется, консоль ничего не говорит. Убедившись, что файл существует и правильно вызван, я проверил другие JS в том же html-документе, и он действительно работает, поэтому я думаю, что что-то не так с тем, как я вызываю эту функцию.
Это мой 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.info('se depositó');
$('#bloqueSucursal').removeClass('sr-only');
$('#bloqueOperacion').removeClass('sr-only');
$('#bloqueCuenta').addClass('sr-only');
}else if (document.getElementById('transferencia').checked) {
console.info('se transfirió');
$('#bloqueCuenta').removeClass('sr-only');
$('#bloqueSucursal').addClass('sr-only');
$('#bloqueOperacion').addClass('sr-only');
}else if (document.getElementById('tarjeta').checked) {
console.info('se pagó con tarjeta');
$('#bloqueCuenta').addClass('sr-only');
$('#bloqueSucursal').addClass('sr-only');
$('#bloqueOperacion').removeClass('sr-only');
}else if (document.getElementById('efectivo').checked) {
console.info('se pagó en efectivo');
$('#bloqueCuenta').addClass('sr-only');
$('#bloqueSucursal').addClass('sr-only');
$('#bloqueOperacion').addClass('sr-only');
}
},
Итак, как вы можете видеть, если я щелкну радио с идентификатором tarjeta, содержимое bloqueOperacion должно изменить классы. Sr-only - это класс, который скрывает содержимое, поэтому скрытый материал должен появиться после удаления класса.
Что я делаю неправильно? Спасибо!
удалите addEventListener из html и добавьте это в js document.getElementById("tarjeta").addEventListener("click", function(){ avisoPago.tipoPago() });
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
addEventListener - неправильное имя атрибута. Замени его на onClick
Вы перепутали ненавязчивую функцию js с атрибутом HTML.
Обновлено: то, что вы хотите, это
onClick = "avisoPago.tipoPago()"
Он использовал onClick, и это не сработало, поэтому я изменил его на addEventListener
@Rosamunda addEventListener - это функция, которую вы вызываете из Javascript, а не атрибут.
addEventListener - это не атрибут, это функция, которую вы вызываете из JS.
Но поскольку вы используете jQuery, вы можете использовать его более короткий метод:
$(document).ready(function() {
$("#tarjeta").click(avisoPago.tipoPago);
});
Вздох, да. Не могу предположить, что читатель знает эти очевидные вещи.
Я только начинаю с JS Спасибо! Задача решена! :)
Я не уверен во всем остальном, но, заменив addEventListener на onclick, удалив return из onclick, изменив .getElementById tipoPago на tarjeta, правильную цель, и добавив } в конец предоставленного вами объекта 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('tarjeta').checked) {
console.info('se depositó');
$('#bloqueSucursal').removeClass('sr-only');
$('#bloqueOperacion').removeClass('sr-only');
$('#bloqueCuenta').addClass('sr-only');
}else if (document.getElementById('transferencia').checked) {
console.info('se transfirió');
$('#bloqueCuenta').removeClass('sr-only');
$('#bloqueSucursal').addClass('sr-only');
$('#bloqueOperacion').addClass('sr-only');
}else if (document.getElementById('tarjeta').checked) {
console.info('se pagó con tarjeta');
$('#bloqueCuenta').addClass('sr-only');
$('#bloqueSucursal').addClass('sr-only');
$('#bloqueOperacion').removeClass('sr-only');
}else if (document.getElementById('efectivo').checked) {
console.info('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>
Почему вы используете
return? Функция ничего не возвращает.