Save image URL inside the value of a radio input

Asked

Viewed 122 times

1

I need to take the value of one radio and use it to call an image, follows example below:

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>

I want to use the value of radio's to designate image Urls so I don’t have to declare them all in Javascript. How do I make it work?

Alternative solution I found below, but the images are broken, but the exchange is being made:

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>

javascript html radiobutton img

1 answer

0


You must pass the element by parameter and recover the value in your method:

<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>

  • Thank you but could you insert this your solution along with the for? I couldn’t see how he would get the value of the radios depending on the click of the way you did there.

  • Do not understand, you do not want that when selecting a radiobutton it changes the value of the image with the value of the right radiobutton?

  • I want the image to change according to the radio I chose. when I click on a radio, the image changes according to the url that is in the value of the radio I clicked on.

  • The code I sent just above does just that, I modified the code by adding the <img tag>.

  • I put my full HTML up there for you to see, what I have to change in it?

  • It’s all right in html, just change your javascript function to my function.

  • Okay, I changed the code as you indicated, there’s html and JS. and yet it’s not changing the image when I change the radio.

  • Got it! Look how it got in the second part of the question. It worked here, vlw by the help!

  • 1

    The problem with the top code is that you are using getElementsById and the correct is getElementById

Show 4 more comments

Browser other questions tagged javascript html radiobutton img

You are not signed in. Login or sign up in order to post.