홈>2020-03-18 20:01

javascript - 사진 라디오 버튼 변경

확인 된 라디오 버튼을 기준으로 사진이 표시되는 코드를 작성하고 싶습니다. 스위치 문장으로 코드를 작성했지만 작동하지 않는 것 같습니다.

이 코드는 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" >

자바 스크립트의 다음 코드 :

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

javascripthtml

답변 # 1

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

답변 # 2

먼저 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" >

답변 # 3
choice 에 아무것도 할당하지 않았습니다 . id='choice' 의 속성을 추가하면 당신의 input 에 요소, 당신은 이것을 할 수 있습니다 :
```
var choice = document.getElementById('choice').getAttribute('value');
```
그런 다음 choice 를 전달하십시오 현재하고있는 것과 같은 논쟁으로.

답변 # 4

따옴표 포함 :

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

정말 valeue를 전달하고 있는지 확인하십시오

답변 # 5

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

Python2.net

javascript - 사진 라디오 버튼 변경

관련 자료