>

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

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

  • 답변 # 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" >
    
    

관련 자료

  • 이전 excel vba - 다른 시트의 셀에 대한 하이퍼 링크를 포함 시키려면 어떻게해야합니까?
  • 다음 arrays - ASCII 십진수에서 문자열로 (C의 Arduino에서)