3

Estou tentando carregar essas três imagens no documento mas não estou conseguindo, alguém sabe por que não carrega?

Segue o arquivo xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">     
    <head> 
        <title> JavaScript Imagens</title>  

        <script type = "text/javascript" src = "js/Imagem.js"> </script>

    </head> 
    <body> 
        <div id ="id">
            <img />
            <img />
            <img />

        </div>
    </body>
</html>

Segue o arquivo Javascript:

window.onload = function(){
    carregarPoltronas();    
}

function carregarPoltronas(){
    // não está carregando estas tres imagens diferentes.
    document.getElementById("id").src= "img/ball_disponivel.jpg";
    document.getElementById("id").src= "img/ball_indisponivel.jpg";
    document.getElementById("id").src= "img/ball_selecionada.jpg";  
} 

1 Resposta 1

8

Repara que o elemento do DOM que tem o id "id" é uma div e não uma imagem. Ou seja estás a mudar o atributo .src num elemento div, e a rescrever o mesmo elemento.

Podes fazer assim para corrigir isso:

function carregarPoltronas() {
    var imagens = document.querySelectorAll("#id > img");
    ["img/ball_disponivel.jpg", "img/ball_indisponivel.jpg", "img/ball_selecionada.jpg"].forEach(function(url, i) {
        imagens[i].src = url;
    });
}

Dessa maneira vais buscar os elementos certos com document.querySelectorAll("#id > img"); e depois enquanto iteras a array de urls, usas o index da callback para ir buscar o img certo da lista que o querySelectorAll retorna.

Exemplo: https://jsfiddle.net/8cg42ctd/

1
  • Vlw Sergio Muito obg!
    – Jose.Lemo
    Commented 25/04/2016 às 14:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .