Pass a function parameter according to the value clicked with Javascript

Asked

Viewed 5,145 times

5

I need to pass the value of a function according to the clicked value of it. There are 3 Divs, each one is a gallery. I need that when clicking 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 clicked gallery, just assign the same right in the code. Could they help? I load the function through the body onload on the targeted page, I don’t 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

2 answers

3

The best would be to generate the HTML on the server side. You can open a new window with Javascript and add HTML to it, but the best is even on the server.

By doing this in Javascript I suggest a new function, and I suggest you create 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 with your function. You’re using .innerHTML in jQuery objects and iterate an array as an object. I suggest you change the function to the example below. Notice that I added a new parameter 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 to the function what @bfavaretto had already suggested.

  • thanks ! But the page keeps opening without any image. I did not understand exactly what was done, maybe understanding better I can turn around. I did not understand the function opens Anela and where I should use it, I did not understand the variable img of the function moreGaleria and did not understand how and what I should pass as parameter newElemento. Would you please explain ?

  • I wonder exactly because with this code it returns that "img is null"...

  • @Gabrielozzy sometimes I’m at Sopt during work and kind of distracted. There was an error in my answer, the element I created was img and should be div for #gallery is a div also, and incidentally img no innerHTML. Now fixed.

  • Thanks again for your help. However, it still doesn’t work... I put the two functions in the file pgScript.js and removed the onload from the body on the test page.html. I wonder what it might be ?

  • But I apologize for the ignorance, it also happens that I live in a huge rush. Now I understand the functions and how they work, but how would I pass the function parameter opens dynamically ? I mean, without typing right into the code ?

  • managed to solve my problem, I will post the answer here soon ! Thank you for the attention !

Show 1 more comment

0


My problem was: I needed to direct different galleries to 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 had to be done was pass the gallery number as a parameter to the url to be directed.

Thus:

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 on 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 function moreGaleria(n) 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 on Sopt, sorry if I wasn’t clear, I hope it serves as help to other users who have doubts.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.