1

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>

1 Resposta 1

0

Você deve passar o elemento por parâmetro e recuperar o value no seu método:

<input type="radio" name="race" onclick="raceimg(this)" value="img/doly.jpg">
<input type="radio" name="race" onclick="raceimg(this)" value="img/shrek.jpg">
<input type="radio" name="race" onclick="raceimg(this)" value="img/pikachu.jpg">
<img id="raceimgchange">

<script type="text/javascript">
    function raceimg(elemento){
        document.getElementById("raceimgchange").src = elemento.value;
    }
</script>
9
  • Obrigado mas poderia inserir essa sua solução junto com o for? Não consegui ver como ele pegaria o valor dos radios dependendo do click do jeito que você fez ai.
    – Tandy
    8/04/2019 às 17:44
  • Não entendi, você não deseja que quando selecionar um radiobutton ele troca o valor da imagem com value do radiobutton certo? 8/04/2019 às 17:49
  • Eu quero que a imagem mude de acordo com o radio que eu escolhi. quando eu clicar em um radio, a imagem muda de acordo com a url que consta no valor da radio que cliquei.
    – Tandy
    8/04/2019 às 17:52
  • O código que eu mandei logo acima faz exatamente isso, modifiquei o código adicionando a tag <img>. 8/04/2019 às 17:57
  • 1
    O problema com o codigo de cima é que você está usando getElementsById e o correto é getElementById 9/04/2019 às 10:15

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 .