How to change the image according to a variable coming from the bank?

Question

How to change the image according to a variable coming from the bank?

Navigation

#1 by (0 votes)

0

I'm a beginner in this part of front-end and made a function that returns an integer from my MySQL database. I created 5 images, each corresponding to a number returned from the database and attached them in my imgs folder of the project.

I checked that the value is being passed to the JSP page without any problems, but I would like to know how to do a JavaScript function to call the image according to the number returned by the bank and the tag HTML5 to use in my code.

Currently my JavaScript code is this:

  function mudaFoto(status){
         var fotos = ["imgs/panel/img-painel-02-01.png","imgs/panel/img-painel-02-02.png","imgs/panel/img-painel-02-03.png","imgs/panel/img-painel-02-04.png","imgs/panel/img-painel-02-05.png"];
                if(status==1){
                         document.getElementById("icone").src=fotos[0];
                }
                else{
                if(status==2){
                    document.getElementById("icone").src=fotos[1];
                }
                else{
                if(status==3){
                    document.getElementById("icone").src=fotos[2];
                }
                else{
                if(status==4){
                    document.getElementById("icone").src=fotos[3];
                }
                else{
                    document.getElementById("icone").src=fotos[4];
                }
            }
        }
    }

}

My HTML code:

< img id="icone" img="imgs/panel/img-painel-02-01.png" alt="imagem de status" class="img-responsive" />

mysql javascript html5 java-bean jsp

asked by anonymous 04.06.2017 / 04:59

1 answer

Hide and show div using href Store stack in txt file

score 0 · Answer 1

Your function mudaFoto(status) is OK.

In your img tag the src attribute is missing

<img id="icone" src="imgs/panel/img-painel-02-01.png" img="imgs/panel/img-painel-02-01.png" alt="imagem de status" class="img-responsive" />

You can use onload event directly in your function or in the <body> tag. (Modern versions of Javascript also accept other elements such as the <img> tag.)

Examples:

Direct in function

 window.onload = function mudaFoto(status){ 
 .................
 .................

In the img tag

<img id="icone" ..... onload="mudaFoto(numeroDoBanco)" />

In the body tag

<body onload="mudaFoto(numeroDoBanco)">