如何在使用 JavaScript 单击单选按钮时显示不同的图像？

Question

I have been trying for days to figure this out.我已经尝试了好几天来解决这个问题。 I need to click on a radio button and have the image change.我需要单击一个单选按钮并更改图像。 For example if I click on the golden gate bridge radio button I need it to switch the image to the picture of the bridge.例如，如果我单击金门大桥单选按钮，我需要它将图像切换到桥梁的图片。 So far I can only get it to click on the image and then the image changes but that is not what I want to do.到目前为止，我只能让它单击图像，然后图像会发生变化，但这不是我想要做的。 I have tried many different ways and nothing works.我尝试了许多不同的方法，但没有任何效果。 I am new to JavaScript.我是 JavaScript 的新手。

<!DOCTYPE html>
<html>
<body>
<!--Statue of Liberty image-->
<img id="statue" onclick="changeImage()" 
src=
'https://www.history.com/.image/ar_4:3%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:good%2Cw_1
200/MTY1MTc1MTk3ODI0MDAxNjA5/topic-statue-of-liberty-gettyimages-960610006-promo.jpg' 
width="300">


<p>Click the picture to change image.</p>

<script>
//Functon that changes mage when clicking on the image
function changeImage() {
  var image = document.getElementById('statue');

  if (image.src.match("statue")) {
  image.src=

 'https://www.history.com/.image/ar_4:3%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:good%2Cw_1200/MTY1MTc3MjE0MzExMDgxNTQ1/topic-golden-gate-bridge-gettyimages-177770941.jpg';
  } 
  else if (image.src.match("bridge"))
  {
    image.src = "https://media-cldnry.s-nbcnews.com/image/upload/newscms/2020_26/3392557/200625-mount-rushmore-al-0708.jpg";
}
}
</script>
<!-- Radio buttons-->
    <form>
    <input type="radio" id = "statue-button" name = "landmark" checked value="statue"onClick= ('toggleImage')>Statue of Liberty<br>
    <input type="radio" id = "bridge-button" name="landmark" value="bridge">Golden Gate Bridge<br>
    <input type="radio" id = "rushmore-button" name="landmark" value="rushmore">Mount Rushmore<br>
    </form>

</body>
</html>

Answer 1

There are a few things you should correct so that your code works as expected.您应该更正一些事情，以便您的代码按预期工作。

<input type="radio" id = "statue-button" name = "landmark" checked value="statue"onClick= ('toggleImage')>Statue of Liberty<br>

should be changed to应该改为

<input type="radio" id="statue-button" name="landmark" checked value="statue" onClick="changeImage('statue')">Statue of Liberty<br>

So that the spaces are in the correct places and the onClick attribute is inside quotes.这样空格就在正确的位置，并且onClick属性在引号内。

Then inside the function changeImage() you should check the parameter (in my example named value ) simply by comparison.然后在 function changeImage()中，您应该通过比较检查参数（在我的示例中名为value ）。 The method match is intended to be used with regular expressions and not needed here.方法match旨在与正则表达式一起使用，此处不需要。

function changeImage (value) {
    var image = document.getElementById('statue');
    if (value === 'statue') {
        image.src = '...';
    } else if (value === 'bridge') {
        image.src = '...';
    }
}

Answer 2

Well I found a solution to your problem.好吧，我找到了解决您问题的方法。

I basically added click event Listeners for each of the radio inputs, then when an input was clicked I got hold of its value attribute using the event passed through the callback function and compared it to each of the elements from the array radioInputs.我基本上为每个无线电输入添加了单击事件侦听器，然后当单击输入时，我使用通过回调 function 传递的事件来获取其值属性，并将其与数组 radioInputs 中的每个元素进行比较。

If it matched then I changed the img src attribute using the index of the input (which I got from the forEach loop) on the array urls.如果匹配，那么我使用数组 url 上的输入索引（我从 forEach 循环中获得）更改了 img src 属性。 Besides I changed the clicked input's checked attribute to true and removed this attribute from the other 2 inputs.此外，我将单击输入的选中属性更改为 true，并从其他 2 个输入中删除了此属性。

Here's the code (a html file and a script):这是代码（一个 html 文件和一个脚本）：

 let urls = [ 'https://www.history.com/.image/ar_4:3%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:good%2Cw_1200/MTY1MTc1MTk3ODI0MDAxNjA5/topic-statue-of-liberty-gettyimages-960610006-promo.jpg', 'https://www.history.com/.image/ar_4:3%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:good%2Cw_1200/MTY1MTc3MjE0MzExMDgxNTQ1/topic-golden-gate-bridge-gettyimages-177770941.jpg', "https://media-cldnry.s-nbcnews.com/image/upload/newscms/2020_26/3392557/200625-mount-rushmore-al-0708.jpg" ] let radioInputs = document.querySelectorAll("input"); radioInputs.forEach(function (input, index) { input.addEventListener('click', handleChange); }); function handleChange(e) { let inputValue = e.target.value; radioInputs.forEach(function (input, index) { if (input.value === inputValue) { radioInputs[index].setAttribute("checked", "true"); let image = document.getElementById("statue"); image.src = urls[index]; } else { radioInputs[index].removeAttribute("checked"); } }); }

 <:DOCTYPE html> <html> <body> <.--Statue of Liberty image--> <img id="statue" src= 'https.//www.history:com/:image/ar_4.3%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto.good%2Cw_1 200/MTY1MTc1MTk3ODI0MDAxNjA5/topic-statue-of-liberty-gettyimages-960610006-promo.jpg' width="300"> <p>Click the picture to change image.</p> <!-- Radio buttons--> <form> <input type="radio" id="statue-button" name="landmark" checked value="statue">Statue of Liberty<br> <input type="radio" id="bridge-button" name="landmark" value="bridge">Golden Gate Bridge<br> <input type="radio" id="rushmore-button" name="landmark" value="rushmore">Mount Rushmore<br> </form> <script src="script.js"></script> </body> </html>

I hope you understood what I did here!我希望你明白我在这里做了什么！ Good luck on your next coding sessions!祝您下一次编码会议好运！

如何在使用 JavaScript 单击单选按钮时显示不同的图像？

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-12-27 23:54:30

解决方案2
1 2021-12-28 00:45:23

如何在使用 JavaScript 单击单选按钮时显示不同的图像？

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-12-27 23:54:30

解决方案2 1 2021-12-28 00:45:23

解决方案1
1 已采纳 2021-12-27 23:54:30

解决方案2
1 2021-12-28 00:45:23