Preciso pegar o valor de um radio
e usá-lo para chamar uma imagem, segue exemplo abaixo:
function raceimg(elemento){
document.getElementsById("raceimgchange").src = elemento.value;
};
<html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Builder</title>
<script type="text/javascript" src="JS/racetype.js"></script>
</head>
<body>
<section id="racetype">
<p><input type="radio" name="race" onclick="raceimg(this)" value="img/doly.jpg"> Human </p>
<p><input type="radio" name="race" onclick="raceimg(this)" value="img/shrek.jpg"> Dwarf </p>
<p><input type="radio" name="race" onclick="raceimg(this)" value="img/pikachu.jpg"> Elf </p>
</section>
<section id="raceimg">
<img src="img/doly.jpg" alt="Doly" id="raceimgchange">
</section>
</body>
</html>
Quero usar o value
dos radio
's para designar as URL's das imagens para eu não ter que declarar todas no JavaScript. Como faço pra isso funcionar?
Solução alternativa que encontrei a baixo, porém as imagens ficam quebradas, mas está sendo feita a troca:
function raceimg(elemento){
document.getElementById("texto1").innerHTML = elemento;
document.getElementById("img1").innerHTML = "<img src='"+elemento+".jpg' alt='img/"+elemento+".jpg'>";
};
<html><!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Builder</title>
<script type="text/javascript" src="JS/racetype.js"></script>
</head>
<body>
<section id="racetype">
<p><input type="radio" name="race" onclick="raceimg('doly')"> Human </p>
<p><input type="radio" name="race" onclick="raceimg('shrek')"> Dwarf </p>
<p><input type="radio" name="race" onclick="raceimg('pikachu')"> Elf </p>
<img id="raceimgchange">
</section>
<section id="raceimgagem">
<span id="texto1"></span> ---> <span id="img1"></span>
</section>
</body>
</html>