¿由于在 jsPDF 脚本中导入库，因此无法在选择收音机时输入错误的功能？

问题描述 投票：0回答：1

如果要使用特定选项，请单击输入无线电选项，然后单击输入无线电选项，以显示最重要的信息：无。导入 jsPDF 库并通过脚本控制按钮的功能，然后点击按钮，即可看到没有内容的内容。 Gracias de antemano por su ayuda.

HTML:
<div class="contenedorFormasPago">
                    <h2>Elija un método de pago</h2>
                    <p class="avisoSuperiorPequenio">Todas las transacciones son seguras y están encriptadas. Su pedido incluye devoluciones gratuitas y acceso 24/7 a nuestro servicio de atención al cliente.</p>

                    <!--Forma de pago vía tarjetas de crédito o débito-->
                    <div class="opcionPago o1">
                        <input id="opcion1" name="opciones" value="opcion1" type="radio" required> <label for="opcion1">Tarjeta de crédito o débito</label>
                    </div>
                    <!--Contenedor oculto de vía tarjetas de crédito-->
                    <div class="contenedor-opcion" id="contenedorTarjetaCredito">
                        <input id="numTarjeta" name="num-tarjeta" type="text" placeholder="Número de tarjeta" required><br>
                        <input id="vencimiento" name="vencimiento" type="date" placeholder="Fecha de vencimiento (MM/AA)" maxlength="10" required><br>
                        <input id="codigoSeguridad" name="codigo-seguridad" type="text" maxlenght="3" placeholder="Código de seguridad" required><br>
                        <input id="nombreTitular" name="nombre-titular" type="text" placeholder="Nombre del titular" maxlength="20" required><br>
                        <input type="checkbox"> <label>Usar la dirección de envío como dirección de facturación</label>
                    </div>

                    <!--Forma de pago vía PayPal-->
                    <div class="opcionPago o2">
                        <input id="opcion2" name="opciones" value="opcion2" type="radio" required> <label for="opcion2">PayPal</label>
                    </div>
                    <!--Contenedor oculto de vía PayPal-->
                    <div class="contenedor-opcion" id="contenedorPayPal">
                        <input id="nombreUsuario" name="nombre-usuario" type="text" placeholder="Nombre de usuario" maxlength="33" required><br>
                        <input id="contraseniaPayPal" name="contrasenia-paypal" type="password" placeholder="Contraseña" maxlength="20" required><br>
                        <input type="checkbox"> <label>Usar la dirección de envío como dirección de facturación</label>
                    </div>

                    <!--Forma de pago vía OXXO-->
                    <div class="opcionPago o3">
                        <input id="opcion3" name="opciones" value="opcion3" type="radio" required> <label for="opcion3">OXXO</label>
                    </div>
                    <!--Contenedor oculto de vía OXXO-->
                    <div class="contenedor-opcion" id="contenedorOXXO">
                        <input id="numTarjeta2" name="num-tarjeta2" type="text" placeholder="Número de tarjeta" maxlength="16" required><br>
                        <input id="vencimiento2" name="vencimiento2" type="date" required><br>
                        <input id="codigoSeguridad2" name="codigo-seguridad2" type="text" placeholder="Código de seguridad" maxlength="3" required><br>
                        <input id="nombreTitular2" name="nombre-titular2" type="text" placeholder="Nombre del titular" maxlength="30" required><br>
                        <input id="direccionOXXO" name="direccion-oxxo" type="text" placeholder="Dirección de la sucursal más cercana" maxlength="100" required><br>
                        <input type="checkbox"> <label>Usar la dirección de envío como dirección de facturación</label>
                    </div>
                </div>
JavaScript:
// Fragmento de código que hace que se desplegan las opciones del tipo de pago
var opcion1 = document.getElementById('opcion1');
var opcion2 = document.getElementById('opcion2');
var opcion3 = document.getElementById('opcion3');
var nombreUsuario = document.getElementById('nombreUsuario');
var contraseniaPayPal = document.getElementById('contraseniaPayPal');
var numTarjeta = document.getElementById('numTarjeta');
var numTarjeta2 = document.getElementById('numTarjeta2');
var vencimiento = document.getElementById('vencimiento');
var vencimiento2 = document.getElementById('vencimiento2');
var codigoSeguridad = document.getElementById('codigoSeguridad');
var codigoSeguridad2 = document.getElementById('codigoSeguridad2');
var nombreTitular = document.getElementById('nombreTitular');
var nombreTitular2 = document.getElementById('nombreTitular2');
var direccionOXXO = document.getElementById('direccionOXXO');
var contenedorTarjetaCredito = document.getElementById('contenedorTarjetaCredito');
var contenedorPayPal = document.getElementById('contenedorPayPal');
var contenedorOXXO = document.getElementById('contenedorOXXO');

function desplegarPeticionDatos()
{
    if (opcion1.checked)
    {
        numTarjeta.required = true;
        vencimiento.required = true;
        codigoSeguridad.required = true;
        nombreTitular.required = true;
        nombreUsuario.required = false;
        contraseniaPayPal.required = false;
        numTarjeta2.required = false;
        vencimiento2.required = false;
        codigoSeguridad2.required = false;
        nombreTitular2.required = false;
        direccionOXXO.required = false;
        contenedorTarjetaCredito.style.display = 'block';
        contenedorPayPal.style.display = 'none';
        contenedorOXXO.style.display = 'none';
    }
    else if (opcion2.checked)
    {
        nombreUsuario.required = true;
        contraseniaPayPal.required = true;
        numTarjeta.required = false;
        numTarjeta2.required = false;
        vencimiento.required = false;
        vencimiento2.required = false;
        codigoSeguridad.required = false;
        codigoSeguridad2.required = false;
        nombreTitular.required = false;
        nombreTitular2.required = false;
        direccionOXXO.required = false;
        contenedorTarjetaCredito.style.display = 'none';
        contenedorPayPal.style.display = 'block';
        contenedorOXXO.style.display = 'none';
    }
    else if (opcion3.checked)
    {
        vencimiento2.required = true;
        numTarjeta2.required = true;
        codigoSeguridad2.required = true;
        nombreTitular2.required = true;
        direccionOXXO.required = true;
        nombreUsuario.required = false;
        contraseniaPayPal.required = false;
        numTarjeta.required = false;
        vencimiento.required = false;
        codigoSeguridad.required = false;
        nombreTitular.required = false;
        contenedorTarjetaCredito.style.display = 'none';
        contenedorPayPal.style.display = 'none';
        contenedorOXXO.style.display = 'block';
    }
}
opcion1.addEventListener('change', desplegarPeticionDatos);
opcion2.addEventListener('change', desplegarPeticionDatos);
opcion3.addEventListener('change', desplegarPeticionDatos);

Intenté cambiar el la linea donde estaba la importación (que estaba debajo del código que que controla los input Tipo radio) al principio para ver si eso solucionaría el Problema, pero no dió resultado.

javascript html radio-button jspdf checked
1个回答
0
投票

该问题描述了 jsPDF 图书馆和 JavaScript 公式中的事件发生冲突的情况。这可能是由于各种原因而发生的，例如名称冲突、事件管理的功能或干扰。 Aquí te dejo algunas sugerencias para solucionar or Diagnosticar el Problema:

  1. 修改控制台错误：Abre las Herramientas de desarrollo del navegador (generalmente con F12) y verifica si hay errores en la consola cuando cargas la página y cuando interuaas con los input tipo radio. Los errores aquí podrían darte pistas sobre qué está Fallando.

  2. 问题的解决：jsPDF 导入的临时注释和与 jsPDF 的关联，以确认问题的定义激增并使用现有的库。如果问题已解决，请与 jsPDF 一起解决问题。

  3. 修改 jsPDF 的初始版本：调整 jsPDF 的功能，以更改 DOM 元素的兼容性，以与元素无线电进行互动。

  4. Manejo de eventos：Cambia 

    addEventListener
    por el atributo 
    onclick
    directamente en el HTML para ver si hay un cambio en elcomportamiento. A veces, los manejadores de eventos pueden ser afectados por otras librerías:

    <input id="opcion1" name="opciones" value="opcion1" type="radio" required onclick="desplegarPeticionDatos()"> <label for="opcion1">Tarjeta de crédito o débito</label>

  5. jsPDF 的货运：如果 jsPDF 的货运是 CDN 或外部的，请验证是否存在红色问题，因为脚本的格式不正确或不完整。

  6. JavaScript 冲突：请注意 jsPDF 中没有变量或函数。 Esto puede causar que tu código se sobrescribaaccidentalmente.

  7. Prueba de eventos de escucha：验证 cambio estén siendo efectivamente escuchados 的事件。 

    console.log
    在您的功能中
    desplegarPeticionDatos
    可以调整单选按钮的选项：

    function desplegarPeticionDatos() {
    console.log("Función llamada");
    // Resto del código...
}

如果遇到持续存在的问题，请考虑使用通用 PDF 库的可能性，或实施替代解决方案来解决 PDF 公式和生成 PDF 的问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.