I am encountering an issue where I have defined a function in a JavaScript file and imported it into an HTML file using the ‘type=”module”‘ attribute. However, when I try to call the imported function from the HTML file, it throws an ‘undefined function’ error. I have verified that the function is indeed defined in the JavaScript file. How can I resolve this issue and successfully call the imported function in my HTML file?
I have this “pagLibro.html” where I generate a bookpage, in its body I actually only have the navbar and the shopping cart
<!DOCTYPE html>
<html lang="es">
<head>
<script type="module">
import { cargaLibro } from './js/libroPropio.js';
window.cargaLibro = cargaLibro;
</script>
<script type="module" src="./js/libroPropio.js"></script>
<script src="./js/perfil.js"></script>
and the rest of the body it’s completed automatically from a javascript libroPropio.js, where I do a few things to do a bookpage depending on which book you click on in a main page. The problem is in the function cargaLibro(), I’ve tried everything to make it work but it still says Uncaught ReferenceError: cargaLibro is not defined at HTMLButtonElement.onclick (pagLibro.html?id=3:1:1)
function renderBook(book) {
let libroHtml = "<br><br><br><br>";
libroHtml = `
<div class="container mt-5 mb-5">
<div class="card">
<div class="row g-0" id="${book.id}">
<div class="col-md-6 border-end" id="imagen">
<div class="d-flex flex-column justify-content-center">
<div class="main_image"> <img src="${book.portada}" id="mainProductImage" width="350" alt="Portada del libro"> </div>
<div class="thumbnail_images">
<ul id="thumbnail">
<li><img onclick="cambiaImagen(this)" src="${book.portada}" width="70"></li>
<li><img onclick="cambiaImagen(this)" src="${book.contraportada}" width="70"></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6" id="datos">
<div class="p-3 right-side">
<div class="d-flex justify-content-between align-items-center" id="titulo">
<h3>${book.titulo}</h3>
</div>
<div class="d-flex justify-content-between align-items-center" id="autor">
<h5>${book.autor}</h5>
</div>
<div class="mt-2 pr-3 content" id="texto">
<h6>${book.descripcion}</h6>
</div>
<h3>${book.precio}€</h3>
<div class="buttons d-flex flex-row mt-5 gap-3" id="boton">
// THE PROBLEM IS IN THIS LINE, AND I DON'T KNOW HOW TO SOLVE IT, IN CARGALIBRO
<button onclick="cargaLibro(${book.id})" class="btn btn-dark" id="carga">Añadir al carrito</button>
<button onclick="mostrarFormulario()" class="btn btn-primary">Añadir comentario</button>
</div>
</div>
</div>
</div>
</div>
</div>
`;
libroHtml += `<h1 class="titulo">Comentarios:</h1>
<div id="formularioComentario" style="display: none;">
<h3>Añadir Comentario</h3>
<form id="comentarioForm">
<div>
<label for="usuario">Usuario:</label>
<input type="text" id="usuario" value="${username}">
</div>
<div>
<label for="valoracion">Valoración:</label>
<select id="valoracion" required>
<option value="1">1 Estrella</option>
<option value="2">2 Estrellas</option>
<option value="3">3 Estrellas</option>
<option value="4">4 Estrellas</option>
<option value="5">5 Estrellas</option>
</select>
</div>
<div>
<label for="descripcion">Descripción:</label>
<textarea id="descripcion" required></textarea>
</div>
<button type="submit">Enviar Comentario</button>
</form>
</div>
`;
if (book.comentarios && book.comentarios.length > 0) {
for (let i = 0; i < book.comentarios.length; i++) {
const comentario = book.comentarios[i];
libroHtml += `
<div class="container mt-4">
<div class="row">
<div class="col-md-12">
<div class="card border-0 shadow-sm">
<div class="card-header border-0 pb-0">
<h5 class="card-tittle">${renderValoracion(comentario.valoracion)}</h5>
</div>
<div class="card-body pt-2">
<small class="card-subtitle mb-2 text-muted">${comentario.usuario}</small>
<p class="card-text">${comentario.descripcion}</p>
</div>
</div>
</div>
</div>
</div>
`;
}
} else {
libroHtml += `
<div class="container mt-4">
<div class="row">
<div class="col-md-12">
<div class="card border-0 shadow-sm text-center">
<div class="card-body">
<h2>No hay comentarios para este libro</h2>
</div>
</div>
</div>
</div>
</div>
`;
}
document.getElementById("countResults").innerHTML = libroHtml;
}
the function is this one:
export function cargaLibro(libroIdDiv){
var libroId = libroIdDiv.id
var libro = listProducts.find(function (book) {
return book.id == libroId
})
var cantidad = 0
if (carritoMap.size == 0) {
cantidad = 1
carritoMap.set(libro.id, cantidad)
console.log("PRIMERO")
} else {
var igual = false
for (let [id, cant] of carritoMap.entries()) {
if (libro.id === id) {
cantidad = cant + 1
carritoMap.set(libro.id, cantidad)
igual = true
console.log("IGUALES")
}
}
if (igual == false) {
cantidad = 1
console.log("DISTINTOS")
carritoMap.set(libro.id, cantidad)
}
}
I’m using it as a module because I need to import DBManager.js to connect to a Firebase database and that’s when the onclick buttons started not working. How can I fix this?
I’ve tried doing window.CargaLibro = cargaLibro, declaring the function as a export function, but none of this is working.