0

我正在尝试删除 FirebaseDatabase 中的一些条目，但遇到了问题。控制台Uncaught SyntaxError: Invalid or unexpected token仅在第一个条目中返回错误，其他条目返回Uncaught ReferenceError: MXcLdklS39mrnk7PQEe is not defined at HTMLButtonElement.onclick.

代码如下：

const database = firebase.database();

var imagenBanner, count;
div = document.getElementById( 'accordion' );

database.ref(`/marketing/banners`).once('value').then(function (snap) {
    count = 1;
    snap.forEach(function (childSnapshot) {
        console.log(childSnapshot.val().titulo)
        var str =`
            <div class="card">
                <div class="card-header" id="heading${count}">
                    <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse${count}" aria-expanded="true" aria-controls="collapse${count}">
                            ${childSnapshot.val().titulo}
                        </button>
                    </h5>
                </div>
            
                <div id="collapse${count}" class="collapse show" aria-labelledby="heading${count}" data-parent="#accordion">
                    <div class="card-body">
                        Introduce el banner que se mostrara al iniciar la aplicación. Especifique las imágenes y la descripción de la página.
                        <div style="margin: 20px 50px;">
                            <div class="input-group mb-3">
                                <span class="input-group-text" id="basic-addon1">Titulo</span>
                                <input id="bannerTit${childSnapshot.key}" type="text" class="form-control" placeholder="Titulo" aria-label="Titulo" aria-describedby="Titulo" value="${childSnapshot.val().titulo}">
                            </div>
                            <div class="input-group mb-3">
                                <span class="input-group-text" id="basic-addon1">Descripción</span>
                                <input id="bannerDes${childSnapshot.key}" type="text" class="form-control" placeholder="Descripción" aria-label="Descripción" aria-describedby="Descripción" value="${childSnapshot.val().descripcion}">
                            </div>
                            <div style="width:auto; margin:0 auto; text-align: center;">
                                <img src="${childSnapshot.val().imagen}" class="d-inline-block align-middle d-lg-none" style="max-width:100%; align-self: center; display: inline-block!important;" alt="">
                            </div>
                            <div class="custom-file" style="margin: auto; text-align: center;">
                                <input type="file" class="form-control" id="inputImage${childSnapshot.key}" accept="image/*">
                            </div>
                            <p style="margin: 15px 0px; text-align: end;">
                                <button class="btn btn-dark" id="guardarButton${childSnapshot.key}" class="btn btn-sm btn-outline-secondary" onclick="saveBanner(${childSnapshot.key})">Guardar Banner</button>
                                <button class="btn btn-danger" id="eliminarButton${childSnapshot.key}" class="btn btn-sm btn-outline-secondary" onclick="deleteBanner(${childSnapshot.key})">Eliminar Banner</button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        `;
        div.insertAdjacentHTML( 'beforeend', str );
        document.getElementById('inputImage'+childSnapshot.key).addEventListener('change', handleFileSelect, false);
        ++count;
    });
});


var storageRef = firebase.storage().ref();

function handleFileSelect(evt) {
    console.log("handleFileSelect(evt)");
    evt.stopPropagation();
    evt.preventDefault();
    file = evt.target.files[0];

    metadata = {
        'contentType': file.type
    };

    storageRef.child('banners/' + file.name).put(file, metadata).then(function(snapshot) {
        // Let's get a download URL for the file.
        snapshot.ref.getDownloadURL().then(function(url) {
            imagenBanner = url;
        });
    }).catch(function(error) {
        console.error('Upload failed:', error);
    });
}

function deleteBanner(banner) {
    console.log(banner);
    var result = confirm("Se borrara el banner de marketing. ¿Desea continuar?");
    if (result) {
        database.ref('/marketing/banners/' + banner).remove();
        location.reload();
    }
}

function saveBanner(banner) {
    console.log(banner);
    if (imagenBanner == null){
        imagenBanner = "";
    }
    database.ref('/marketing/banners/' + banner).set({
        titulo: document.getElementById("bannerTit"+banner).value,
        descripcion: document.getElementById("bannerDes"+banner).value,
        imagen: imagenBanner
    });
    location.reload();
}

function createBanner() {
    if (imagenBanner == null){
        imagenBanner = "";
    }
    database.ref('/marketing/banners/').push().set({
        titulo: document.getElementById("bannerTitNew").value,
        descripcion: document.getElementById("bannerDesNew").value,
        imagen: imagenBanner
    });
    location.reload();
}

function newBanner() {
    var str =`
        <div class="card">
            <div class="card-header" id="headingNew">
                <h5 class="mb-0">
                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseNew" aria-expanded="true" aria-controls="collapseNew">
                        Nuevo Banner
                    </button>
                </h5>
            </div>
        
            <div id="collapseNew" class="collapse show" aria-labelledby="headingNew" data-parent="#accordion">
                <div class="card-body">
                    Introduce el banner que se mostrara al iniciar la aplicación. Especifique las imágenes y la descripción de la página.
                    <div style="margin: 20px 50px;">
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1">Titulo</span>
                            <input id="bannerTitNew" type="text" class="form-control" placeholder="Titulo" aria-label="Titulo" aria-describedby="Titulo">
                        </div>
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1">Descripción</span>
                            <input id="bannerDesNew" type="text" class="form-control" placeholder="Descripción" aria-label="Descripción" aria-describedby="Descripción">
                        </div>
                        
                        <div class="custom-file" style="margin: auto; text-align: center;">
                            <input type="file" class="form-control" id="inputImageNew" accept="image/*">
                        </div>
                        <p style="margin: 15px 0px; text-align: end;">
                            <button class="btn btn-dark" id="guardarButtonNew" class="btn btn-sm btn-outline-secondary" onclick="createBanner()">Guardar Banner</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    `;
    div.insertAdjacentHTML( 'afterbegin', str );
    document.getElementById('inputImageNew').addEventListener('change', handleFileSelect, false);
}

当我从条目中单击删除按钮时，应该打开一个警报，但没有任何反应。

我已经检查了按钮元素的 id，所有这些都是正确的并且存在于数据库中。

我希望有人能帮助我。

4

0 回答 0