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>