Problem with element.innerHTML + =

Question

Problem with element.innerHTML + =

Navigation

#1 by (0 votes)
#2 by (0 votes)

2

I have this attempt of gallery of images with bootstrap, but I do not manage to appear bada, this is the complete code of the gallery, the images are named by numbers.

<script>
    var imagenes = [1,2,3,4,5,6,7,8,9];
    var galeria = Document.getElementById('galeria');

        for(imagen of imagenes){
            galeria.innerHTML +=
            '
            <div class="card">
                <a href="#" data-toggle="modal" data-target="#id${imagen}">
                    <img src="imgs/galery/${imagen}.jpg" alt="" class="card-img-top">
                </a>
            </div>
            <div class="modal fade" id="id${imagen}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                <button type="button" class="close mr-2" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>  
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <img src="imgs/galery/${imagen}.jpg" alt="" class="img-fluid rounded">
                </div>
            </div>
            '
        }
</script>

javascript html bootstrap

asked by Juan 05.12.2018 в 06:14

source

2 answers

Problems connecting to BD Cpanel Problem with PHP conditions

score 0 · Answer 1

The problem you have is that you are stepping on the html that you add. The property innerHTML what it does is add the code to the web and it is not possible to use += .

To solve this you would have to add the code to String and then add it with innerHTML .

<script>
    var imagenes = [1,2,3,4,5,6,7,8,9];
    var galeria = Document.getElementById('galeria');
    var html = "";

        for(imagen of imagenes){
            html +=
            '
            <div class="card">
                <a href="#" data-toggle="modal" data-target="#id${imagen}">
                    <img src="imgs/galery/${imagen}.jpg" alt="" class="card-img-top">
                </a>
            </div>
            <div class="modal fade" id="id${imagen}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                <button type="button" class="close mr-2" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>  
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <img src="imgs/galery/${imagen}.jpg" alt="" class="img-fluid rounded">
                </div>
            </div>
            '
        }
        galeria.innerHTML = html;
</script>

score 0 · Answer 2

"Uncaught TypeError: Document.getElementById is not a function",

Changing the D to d to var galeria = document.getElementById('galeria'); seems to work correctly.

    var imagenes = [1,2,3,4,5,6,7,8,9];
    var galeria = document.getElementById('galeria');

        for(imagen of imagenes){
            galeria.innerHTML +=
            '
            <div class="card">
                <a href="#" data-toggle="modal" data-target="#id${imagen}">
                    <img src="https://picsum.photos/320/200/?image=${imagen}" alt="" class="card-img-top">
                </a>
            </div>
            <div class="modal fade" id="id${imagen}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                <button type="button" class="close mr-2" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>  
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <img src="https://picsum.photos/320/200/?image=${imagen}" alt="" class="img-fluid rounded">
                </div>
            </div>
            '
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">


<div id="galeria"></div>