2

Não estou conseguindo fazer uma questão que pede:

Uma pequena biblioteca possui apenas livros de ficção e didáticos (Matemática, Português, etc.). Você está construindo o sistema de empréstimos dessa biblioteca. Na primeira página do sistema, deve existir um select para que o usuário escolha entre o gênero de ficção ou de didáticos. Caso seja escolhido o gênero de ficção, o sistema deve mostrar, logo abaixo, a imagem da capa do livro, o autor e o resumo de um livro da saga Harry Potter e um livro de Sidney Sheldon.

<!DOCTYPE html>
<html>

<head>
    <h1>Biblioteca </h1>
    <script>
        var harry = document.getElementById('imagem-harry');

        function mostrarFoto(ficcao) {
            var fic = document.getElementById(ficcao);
            var foto = "img.src='livroharry.jpg'"
            if (genero.value == 'ficcao') {
                document.getElementById('ficcao').value) {

                alert(imagem);

                harry.innerHTML = "Harry Potter (Daniel Radcliffe) retorna à Escola de Magia e Bruxaria de Hogwarts, para cursar o 5º ano letivo. ... Além disto, o Ministro da Magia Cornélio Fudge (Robert Hardy) impõe à escola a presença de Dolores Umbridge (Imelda Staunton), que torna-se a nova professora de Defesa Contra as Artes das Trevas.";

            }

        }


        }
    </script>
</head>

<body>
    <select id="genero" onchange="(mostrarFoto)">
        <option value="ficcao" id="ficcao"> Ficcao </option>
        <option value="didatico" "id="didatico "> Didatico </option>
    </select>
    <div id="imagem ">
      <img src="livroharry.jpg "  />
    </div>
  </body>
</html>

1 Resposta 1

3

Você definiu o local onde você quer mostrar a imagem desta maneira:

<div id="imagem">

Mas no seu código, você pede para ele pegar o elemento imagem-harry (que parece não existir):

var harry= document.getElementById('imagem-harry');

Além disso, a chamada ao método mostrarFoto, precisa estar entre parênteses para que o script entenda como um método de fato, ex.: mostrarFoto():

<select id="genero" onchange="(mostrarFoto)"> // precisaria ser mostrarFoto()

Eu modifiquei o seu código com essas sugestões, por favor dê uma olhada abaixo (clique em executar).

function mostrarFoto(a) {
/*
* aqui chamamos as duas divs do nosso html:
* "imagem" e "descricao"
*/
  var element = document.getElementById("imagem");
	var element2 = document.getElementById("descricao");

/*
* mostrarFoto() está recebendo uma variavel, 'a'
* que nos dirá o que o usuário escolheu
*/
    if (a == "ficcao") {
		element.innerHTML = "<br><img src='http://i.imgur.com/Md05F0E.png'</img>";
		element2.innerHTML = "<p>Harry Potter (Daniel Radcliffe) retorna à Escola de Magia e Bruxaria de Hogwarts, para cursar o 5º ano letivo. ... Além disto, o Ministro da Magia Cornélio Fudge (Robert Hardy) impõe à escola a presença de Dolores Umbridge (Imelda Staunton), que torna-se a nova professora de Defesa Contra as Artes das Trevas.</p>";
	}

	else if (a == "didatico") {
		element.innerHTML = "<br><img src='http://i.imgur.com/AreoXA1.jpg' width='245'</img>";
		element2.innerHTML = "<p>Papai e mamãe decidiram contar aos filhos como são feitos os bebês. E inventaram um monte de besteiras, sem saber que as crianças já sabiam de toda a verdade.</p>";
	}
}
<html>
<head>
    <h1>Biblioteca </h1>
</head>

<body>
    <select id="genero" onchange="mostrarFoto(value)">
        <option value="escolha"> Escolha... </option>
        <option value="ficcao"> Ficcao </option>
        <option value="didatico"> Didatico </option>
    </select>
 <div id="imagem"></div>
 <div id="descricao"></div>
</body>
</html>

2
  • Muito obrigadooooo <3 Agora entendi o que deveria fazer. Nem sei te dizer o quanto estou grata por você ter me ajudado e eu ter conseguido entender direitinho :D Commented 16/06/2017 às 16:33
  • @MikeliGuedes Que bom que deu certo! Se puder, marque a resposta como aceita clicando na marquinha do lado esquerdo do texto - aí ela sai da fila de "perguntas não respondidas" (e eu ganho pontinhos que valem mais que ouro!) O________O - Ah, e seja bem vinda ao Stack Overflow! :)
    – Daniel
    Commented 17/06/2017 às 1: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 .