[RESOLVIDO]Metodo onclick gerado automaticamente pelo JSP não funciona

Front-end
#1

Galera é o seguinte, fiz uma página em jsp para retornar dados do MySql e montar a página de acordo. Porém, eu precisei imbutir métodos onclicks que não estão funcionando, eu gostaria de entender o motivo e gostaria da ajuda de vocês.

Pra evitar uma página gigante, vou colocar apenas a parte do código importante

<%@page language="java" import="meusBeans.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css">
            #infCarro{
                width:600px;
                height:auto;
                margin-bottom:5px;
                margin-top:5px;
                margin-left:5px;
                margin-right:5px;
                text-align:left;
                background-color: #FFF;
            }
            #abrangeFotoPequena{
                width:600px;
                height:154px;
                text-align: center;
                overflow-x: scroll;
            }
            #obsCarro{
                width:600px;
                height:auto;
            }
        </style>
        <script>
            function mostraFotoGrande(foto, name){
                document.getElementById("fotoCarro"+name).innerHTML = "<img src='imgs/veiculos/" + foto + "' />";
            }
            function desclicarLink(id){
                document.getElementById("a" + id).style.color = "#FFF";
            }
            function clicarLink(id){
                document.getElementById("a" + id).style.color = "#F00";
            }
            function limpaCamposForm(){
                document.getElementById("nome").value = "";
                document.getElementById("email").value = "";
                document.getElementById("mensagem").value = "";
            }
        </script>
    </head>
    <body>
                    <%
                        ConnectDB veic = new ConnectDB();
                        veic.conectaBD();
                        String[][] carro = veic.getDadosVeiculos();
                        out.print("<br/><br/>");
                        for (int i = 0; i < carro.length; i++) {
                            String[] fotos = veic.getFotosVeiculo(carro[i][0].toString());

                            out.print("<br/>");
                            out.print("<div id='infCarro'>");%>
                            
                    <div id="fotoCarro<%=i%>" style="width:600px; height:auto; text-align:center"></div>
                    <%
                        out.print("<div id='abrangeFotoPequena'>");
                        for (int j = 0; j < fotos.length; j++) {
                    %>
                    
                    <img src="imgs/veiculos/<%= fotos[j]%>" onclick="document.getElementById('fotoCarro<%=i%>').innerHTML = <img src='imgs/veiculos/<%= fotos[j]%>'/>" width="150px" height="100px" style="margin:5px"/>
                    <%}
                            out.print("</div>");
                            out.print("<div id='obsCarro'><br/>");
                            out.print("Final da placa: " + carro[i][0] + "<br/>");
                            out.print("Cor: " + carro[i][1] + "<br/>");
                            out.print("Modelo: " + carro[i][2] + "<br/>");
                            out.print("Ano: " + carro[i][3] + "<br/>");
                            out.print("Características: " + carro[i][4]);
                            out.print("</div>");
                            out.print("</div>");
                        }
                        veic.desconectaBD();
                    %>
                    <br/><br/>                        
                </div></div>
    </body>
</html>

Bem simples, no banco de dados eu retorno um vetor com as informações de um carro, e depois outro vetor com os nomes das fotos daquele carro. Eu exibo as informações e todas as fotos de cada carro separadamente em miniatura, e gostaria que ao clicar na foto miniatura, exibisse a foto em tamanho real.

Porém, como posso ter N carros, pra exibir as fotos em tamanho real eu precisaria de uma div pra cada carro, então eu crio divs automaticamente e dou um id a elas. Nas fotos miniatura eu chamo o método onclick, jogando um na div criada automaticamente. Porém não está funcionando, eu gostaria de saber onde está o erro, e se não for possível programar dessa maneira, um jeito alternativo. Aguardo a ajuda de vocês.

#2

Boa noite!

ao invés de fazer isso:

onclick="document.getElementById('fotoCarro<%=i%>').innerHTML = <img src='imgs/veiculos/<%= fotos[j]%>'/>"

porque vc não usa function que vc já criou

  function mostraFotoGrande(foto, name){  
                document.getElementById("fotoCarro"+name).innerHTML = "<img src='imgs/veiculos/" + foto + "' />";  
            }  
onclick="mostraFotoGrande('<%=i%>', '<%= fotos[j]%>');"

acho que vc tá começando no java web né?

aconselho vc a estudar essa apostila http://www.caelum.com.br/download/caelum-java-web-fj21.pdf

vai te ajudar muito

#3

Olá.

Eu creio que não funciona devido a má construção desse comando JavaScript:

onclick="document.getElementById('fotoCarro<%=i%>').innerHTML = <img src='imgs/veiculos/<%= fotos[j]%>'/>"

O conteúdo a ser colocado na innerHTML deve ser do tipo String, então deveria estar entre aspas.

Faça o que o Danilo falou e deixe essa lógica ser executada na função…

Mais uma dica: use as ferramentas de desenvolvedor que os navegadores atuais possuem (como por exemplo, o F12 ou Ctrl+Shift+I no Chrome).
Normalmente você consegue pegar bastante erros desse tipo por lá…

Valeu.

#4

Realmente estou começando, erro de iniciante. Obrigado por me ajudarem, finalmente funcionou.

Vlw galera, nem sei como agradecer!

#5