Expand my Community achievements bar.

how to rewrite this code to work on target with javascript ?

Avatar

Level 1

Hi! i have this function and this object that i wanna pass like a parameter, but when i pass the script on target, doest'n work. how can I make it work?

    const preguntas = [
        {
            pregunta: "¿Cómo puedo sacar mi cuenta y tarjeta en Santander?",
            respuesta: "Podes pedirlas 100% online siguiendo estas instrucciones, sin necesidad de moverte de tu casa y en cualquier momento del día. Te vamos a pedir unos datos, una foto de tu DNI, una selfie y ¡listo! En 5 minutos, ya la tenés :)"
        },
        {
            pregunta: "¿Qué incluye una Tarjeta Santander?",
            respuesta: "Incluye una Caja de Ahorro en pesos, una Caja de Ahorro en dólares y también tarjeta/s de crédito y débito para que puedas comprar lo que quieras."
        }
    ]
    const addPreguntas = (parent, items)=>{
        let container = document.createElement("div");
        container.className = "cro-containerPreguntas";
        container.innerHTML = `
        <section>
            <h3>Preguntas Frecuentes</h3>
            <div class="cro-containerTextPreguntas">
            ${items
                .map(
                    (item, index) => `
                    <div class="cro-container">
                    <div class="cro-chevrons">
                        <p>${item.pregunta}</p>
                    </div>
                    <p class="cro-respuestas cro-hide">${item.respuesta}</p>                      
                    </div>
            `
                )
                .toString()
                .replace(/,/g, "")}                  
        </div>
        </section>`;
   
        parent.insertAdjacentElement("afterend", container);
    }
    addPreguntas(padre.children[0], preguntas);
1 Reply

Avatar

Level 3

Hi @FlaviaSo 

 


1.DOM Element Not Found: Ensure that `padre` is defined and refers to an existing DOM element. If `padre.children[0]` doesn't exist in the target environment, it will throw an error.

2.Script Execution Timing: Ensure that your script is executed after the DOM has been fully loaded. If your script executes before the target DOM elements are created, it won't find the `padre.children[0]` element.

 

3. Script Errors: Check if there are any errors in the browser console. Any errors in your script could prevent it from executing correctly.

Here's a refined version of your script with error handling and a DOMContentLoaded event listener to ensure that it runs after the DOM is fully loaded:

javascript&colon;

 

 

document.addEventListener("DOMContentLoaded", function() {
const preguntas = [
{
pregunta: "¿Cómo puedo sacar mi cuenta y tarjeta en Santander?",
respuesta: "Podes pedirlas 100% online siguiendo estas instrucciones, sin necesidad de moverte de tu casa y en cualquier momento del día. Te vamos a pedir unos datos, una foto de tu DNI, una selfie y ¡listo! En 5 minutos, ya la tenés :)"
},
{
pregunta: "¿Qué incluye una Tarjeta Santander?",
respuesta: "Incluye una Caja de Ahorro en pesos, una Caja de Ahorro en dólares y también tarjeta/s de crédito y débito para que puedas comprar lo que quieras."
}
];

const addPreguntas = (parent, items) => {
let container = document.createElement("div");
container.className = "cro-containerPreguntas";
container.innerHTML = `
<section>
<h3>Preguntas Frecuentes</h3>
<div class="cro-containerTextPreguntas">
${items.map(item => `
<div class="cro-container">
<div class="cro-chevrons">
<p>${item.pregunta}</p>
</div>
<p class="cro-respuestas cro-hide">${item.respuesta}</p>
</div>
`).join("")}
</div>
</section>`;

parent.insertAdjacentElement("afterend", container);
};

const padre = document.getElementById("parentElementId"); // Replace "parentElementId" with the actual ID of the parent element

if (padre) {
addPreguntas(padre.children[0], preguntas);
} else {
console.error("Parent element not found.");
}
});
```

Make sure to replace `"parentElementId"` with the actual ID of the parent element where you want to insert the generated HTML. Also, ensure that your target environment has support for modern JavaScript features.