更改图片单选按钮

Question

我想编写一个代码，根据选中的单选按钮显示图片。我写了一个带切换句的代码，但它似乎没有用。

我在html中有这段代码：

<input name="color" value="grey" type="radio" onclick="changeClr('image1')" > image1 
<input name="color" value="image2" type="radio" onclick="changeClr('image2')"> image2 
<input name="color" value="image3" type="radio" onclick="changeClr('image3')"> image3 
<input name="color" value="image4" type="radio" onclick="changeClr('image4')"> image4 

<img id='image' src='' width="400px" height"300px" >

并在javascript中使用以下代码：

function changeClr(choice) {

switch(choice){
    case grey: {
        document.getElementById('image').src='./image1.jpg'
    }
    break;
    case image2: {
        document.getElementById('image').src='./image2.jpg'
    }
    break;
    case image3: {
        document.getElementById('image').src='./image3.jpg'
    }
    break;
    case image4: {
        document.getElementById('image').src='./image4.jpg'
    }
    break;
    default: document.getElementById('image').src='./default.jpg'
}

Answer 1

首先在你的switch语句中你需要检查字符串而不是对象：

function changeClr(choice) {
  switch(choice){
      case 'grey': {
          document.getElementById('image').src='./image1.jpg'
      }
      break;
      case 'image2': {
          document.getElementById('image').src='./image2.jpg'
      }
      break;
      case 'image3': {
          document.getElementById('image').src='./image3.jpg'
      }
      break;
      case 'image4': {
          document.getElementById('image').src='./image4.jpg'
      }
      break;
      default: document.getElementById('image').src='./default.jpg'
  }
}

<input name="color" value="grey" type="radio" onclick="changeClr('image1')" > image1 
<input name="color" value="image2" type="radio" onclick="changeClr('image2')"> image2 
<input name="color" value="image3" type="radio" onclick="changeClr('image3')"> image3 
<input name="color" value="image4" type="radio" onclick="changeClr('image4')"> image4 

<img id='image' src='' width="400px" height"300px" >

Answer 2

您没有为choice分配任何内容。如果您将id='choice'的属性添加到input元素，则可以执行以下操作：

var choice = document.getElementById('choice').getAttribute('value');

然后将choice作为参数传递，就像你现在正在做的那样。

Answer 3

包含引号：

function changeClr(choice) {

switch(choice){
    case 'grey': {
        document.getElementById('image').src='./image1.jpg'
    }
    break;
    case 'image2': {
        document.getElementById('image').src='./image2.jpg'
    }
    default: document.getElementById('image').src='./image2.jpg'
}
}

确保传递正确的代价

Answer 4

在开关

处将var choice视为字符串

function changeClr(choice) {

switch(choice){
      case "image1": {
          document.getElementById('image').src='./image1.jpg'
      }
      break;
      case "image2": {
          document.getElementById('image').src='./image2.jpg'
      }
      break;
      case "image3": {
          document.getElementById('image').src='./image3.jpg'
      }
      break;
      case "image4": {
          document.getElementById('image').src='./image4.jpg'
      }
      break;
      default: document.getElementById('image').src='./default.jpg'
  }
}

<input name="color" value="grey" type="radio" onclick="changeClr('image1')" > image1 
<input name="color" value="image2" type="radio" onclick="changeClr('image2')"> image2 
<input name="color" value="image3" type="radio" onclick="changeClr('image3')"> image3 
<input name="color" value="image4" type="radio" onclick="changeClr('image4')"> image4 

<img id="image" src="" width="400px" height"300px" >

并且不要将“与' <img id='image' src='' width="400px" height"300px" >混合

使用：

<img id="image" src="" width="400px" height"300px" >

Answer 5

function changeClr(choice) {
var image = document.getElementById('image');
switch(choice){
    case 'gray': 
        image.src='http://via.placeholder.com/300x400/f00';
        break;
    case 'image2': 
        image.src='http://via.placeholder.com/300x400/0f0';
    break;
    case 'image3':
        image.src='http://via.placeholder.com/300x400/00f';
    break;
    case 'image4':
        image.src='http://via.placeholder.com/300x400/';
    break;
    default: image.src='http://via.placeholder.com/300x400/000';
  }
}

<input name="color" value="grey" type="radio" onclick="changeClr('image1')" > image1 
<input name="color" value="image2" type="radio" onclick="changeClr('image2')"> image2 
<input name="color" value="image3" type="radio" onclick="changeClr('image3')"> image3 
<input name="color" value="image4" type="radio" onclick="changeClr('image4')"> image4 

<img id='image' src='' width="400px" height"300px" >