Pass parameter of a function according to the value clicked with JavaScript

Question

Pass parameter of a function according to the value clicked with JavaScript

Navigation

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

5

I need to pass the value of a function according to its clicked value. There are 3 divs, each one is a gallery. I need to click on the "see more" option, open a page with all the photos only from that gallery, however, I do not know how to pass the value of the gallery clicked, just assign the same direct in the code. Could you help? I load the function through body onload on the targeted page, I do not know if it's the best way ...

The gallery:

while(x <= 3){

            imgs.innerHTML += "<div id='gal"+x+"' class='row'>";
            imgs.innerHTML += "<div class='eight columns'>";
            imgs.innerHTML += "<h4>Galeria "+x+"</h4>"

        for(var i = 0; i <= 3; i++){
            galeria[i] = "foto"+x+"_"+(i+1)+".jpg";
        }


        for(var i = 0; i < galeria.length; i++){
            imgs.innerHTML += "<img src='img/"+galeria[i]+"' class='imgs-galeria'>";
        }

        imgs.innerHTML += "</div>";
        imgs.innerHTML += "</div>";
        imgs.innerHTML += "<a href='teste.html'><div id='link'><p>Veja mais</p></div>";
        x++;
    }

The page teste.html :

<body onload="maisGaleria(2);">
<div class="center">
<div class="row">
<div class="four columns top">
    <h5>Nome</h5>
</div>
<div class="eight columns menu">
    <ul>
        <a href="index.html"><li><h4 class="menu-list">Home</h4></li></a>
        <a href="galeria.html"><li><h4 class="menu-list">Galeria</h4></li></a>
        <a href="sobre.html"><li><h4 class="menu-list">Sobre</h4></li></a>
        <a href="contato.html"><li><h4 class="menu-list">Contato</h4></li></a>
    </ul>
</div>
</div>
<div class="row galeria">
<div id="gallery" class="container">
</div>
</div>
<div class="row">
<div id="footer">
<div class="four columns">
    <h4>Nome</h4>
</div>
<div class="eight columns img-footer" id="social">
</div>
</div>
</div>
</div>

and the function maisGaleria(n) :

function maisGaleria(n){

    var galeria = new Array();
    var img = $("#gallery");

        img.innerHTML = "<div class='row'>";
        img.innerHTML = "<div class='six columns'>";
        //imgs.innerHTML += "<h4>Galeria"+n+"</h4>";

        for(var i = 0; i <= 3; i++){
            galeria[i] = "foto"+n+"_"+(i+1)+".jpg";
        }

        //se utilizar <=galeria.length, ele adicionara um valor vazio, que foi atribuido devido ao (i+1) do outro for.
        for(var i = 0; i < galeria.length; i++){
            img.innerHTML += "<img src='img/"+galeria[i]+"' class='imgs-galeria'>";
        }

        img.innerHTML += "</div>";
        img.innerHTML += "</div>";
}

javascript html css

asked by anonymous 15.04.2015 / 00:03

2 answers

3

It would be best to generate HTML on the server side. It is possible to open a new window with JavaScript and add HTML to it, but the best is even on the server.

Doing this in JavaScript suggests a new function, and I suggest creating a way for your function to return HTML without writing directly. So you could use the HTML it generates in another function like this:

function abreJanela(nrGaleria) {
    var novaJanela = window.open();
    var html = maisGaleria(n, true);
    $(novaJanela.document.body).html(html);
}

I see some problems in your role. You are using .innerHTML in jQuery objects and iterating an array as an object. I suggest you change the function for the example below. Notice that I've put a new parameter in it to return the HTML:

function maisGaleria(n, novoElemento){

    var galeria = [];
    var img = novoElemento ? document.createElement('div') : document.getElementById("#gallery");

        img.innerHTML = "<div class='row'>";
        img.innerHTML = "<div class='six columns'>";
        //imgs.innerHTML += "<h4>Galeria"+n+"</h4>";

        for(var i = 0; i <= 3; i++){
            galeria.push("foto"+n+"_"+(i+1)+".jpg");
        }

        //se utilizar <=galeria.length, ele adicionara um valor vazio, que foi atribuido devido ao (i+1) do outro for.
        for(var i = 0; i < galeria.length; i++){
            img.innerHTML += "<img src='img/"+galeria[i]+"' class='imgs-galeria'>";
        }
        imgs.innerHTML += "<a href='teste.html' onclick='maisGaleria(" + x + "); return false;'><div id='link'><p>Veja mais</p></div>";
        img.innerHTML += "</div>";
        img.innerHTML += "</div>";
        return img;
}

Notice that I also added in the function what @bfavaretto had already suggested.

15.04.2015 / 05:36

Check if Input :: file exists Laravel Back debug line

score 0 · Accepted Answer

My problem was: I needed to target different galleries on the same page (now called pics.html), but with different values, so that the same page would bring images from gallery 1, 2 or 3, without the need for a different page for each gallery (because if there was a page for each, the user would be unable to create a new gallery). What was needed was to pass the gallery number as a parameter to the url to be directed.

In this way:

window.onload = function(){

    var galeria = new Array();

    var imgs = $("#gallery");
    var x = 1;

while(x <= 3){

            imgs.innerHTML += "<div class='row'>";
            imgs.innerHTML += "<div class='eight columns'>";
            imgs.innerHTML += "<h4>Galeria "+x+"</h4>"

        for(var i = 0; i <= 3; i++){
            galeria[i] = "foto"+x+"_"+(i+1)+".jpg";
        }

        for(var i = 0; i < galeria.length; i++){
            imgs.innerHTML += "<img src='img/"+galeria[i]+"' class='imgs-galeria'>";
        }

        imgs.innerHTML += "</div>";
        imgs.innerHTML += "</div>";
        imgs.innerHTML += "<a id='veja' href='pics.html?gal="+x+"'><div id='link'><p>Veja mais</p></div>"
     // O ? ao fim da url começa a dar parametros para o link, deste modo o parametro de cada galeria sera respectivo ao seu mesmo valor.
    x++;
}

And in the pics.html page, just call the function moreGaleria (n) giving the value of the url parameter the function:

    window.onload = function(){

        /* location.search fara uma busca naquela url, e o metodo split() transforma os elementos em arrays. Nos parenteses ("?gal=") estou mandando separar em arrays sem esse valor, estou separando ele do total, e pegando o segundo [1] valor do array, ja que o primeiro é nulo. Ao final, a variavel x recebe o valor.*/

        var x = location.search.split("?gal=")[1];

        //o y recebe o body
        y = $("#pics");

        //console.log(x);

        //e passa a função mais galeria com o valor do parametro ao body, quando carregar.
        //não preciso passar o html pois ja esta todo na função.

        y.onload = maisGaleria(x);

}

    </script>
</head>
<body id="pics">
<!-- código html -->

And the mostGaleria (n) function remained the same.

function maisGaleria(n){

    var galeria = new Array();
    var img = $("#gallery");

        img.innerHTML = "<div class='row'>";
        img.innerHTML += "<div class='six columns'>";
        //img.innerHTML += "<h4>Galeria"+n+"</h4>";

        for(var i = 0; i <= 3; i++){
            galeria[i] = "foto"+n+"_"+(i+1)+".jpg";
        }

        for(var i = 0; i < galeria.length; i++){
            img.innerHTML += "<img src='img/"+galeria[i]+"' class='imgs-galeria'>";
        }

        img.innerHTML += "</div>";
        img.innerHTML += "</div>";
}

This is my first answer in SOpt, sorry if I was not clear, I hope it will help other users who have doubts.