画像が明確に定義されても変更されない

私のコードはすべて正しく表示されますが、submit（）関数を実行すると、選択したボックスに基づいて画像が変更されません。できるなら助けてください、どんな助けても喜んで感謝します。 JavaScriptで画像が明確に定義されても変更されない

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Computer System Order</title> 
 
    <script> 
 
    var imgArray = new Array(9); 
 
    var index = 0; 
 

 
    function submit() { 
 
     if (document.ComputerForm.computerCase[0].checked) { 
 
     alert("Box one selected"); 
 
     document.ComputerForm.caseimg.src = imgArray[0].src; 
 

 
     } else if (document.ComputerForm.computerCase[1].checked) { 
 
     alert("Box two selected"); 
 
     document.ComputerForm.caseimg.src = imgArray[1].src; 
 
     } else { 
 
     alert("Box three selected"); 
 
     document.ComputerForm.caseimg.src = imgArray[2].src; 
 
     } 
 
    } 
 

 
    function startup() { 
 
     imgArray[0] = new Image; 
 
     imgArray[0].src = imgArray[0].alt = "desktopcase.jpg"; 
 
     imgArray[1] = new Image; 
 
     imgArray[1].src = imgArray[1].alt = "minidesktop.jpg"; 
 
     imgArray[2] = new Image; 
 
     imgArray[2].src = imgArray[2].alt = "fulltower.jpg"; 
 
     imgArray[3] = new Image; 
 
     imgArray[3].src = imgArray[3].alt = "17monitor.jpg"; 
 
     imgArray[4] = new Image; 
 
     imgArray[4].src = imgArray[4].src = "19monitor.jpg"; 
 
     imgArray[5] = new Image; 
 
     imgArray[5].src = imgArray[5].src = "21monitor.jpg"; 
 
     imgArray[6] = new Image; 
 
     imgArray[6].src = imgArray[6].src = "inkprinter.jpg"; 
 
     imgArray[7] = new Image; 
 
     imgArray[7].src = imgArray[7].src = "laserprinter.jpg"; 
 
     imgArray[8] = new Image; 
 
     imgArray[8].src = imgArray[8].src = "colorlaserprinter.jpg"; 
 
    } 
 
    </script> 
 
</head> 
 

 
<body onLoad="startup()"> 
 
    <form name="ComputerForm"> 
 
    <table style="width:100%"> 
 
     <tr> 
 
     <td> 
 
      <p> 
 
      <font face="Courier New"> 
 
    \t \t <br> 
 
    \t \t <br> 
 
    \t \t \t \t \t \t \t \t <b>Computer Case Style:</b><br><input name="computerCase" type="radio">Desktop Case ($500.00)<br> 
 
    \t \t \t \t \t \t \t \t <input name="computerCase" type="radio">Mini-Tower ($600.00)<br> 
 
    \t \t \t \t \t \t \t \t <input name="computerCase" type="radio">Full Tower Case ($700.00)<br> 
 
    \t \t \t \t \t \t \t \t <br> 
 
    \t \t \t \t \t \t \t \t <br> 
 
    \t \t \t \t \t \t \t \t <b>Computer Monitor:</b><br><input name="monitor" type="radio">17" LCD Flat Screen ($250.00)<br> 
 
    \t \t \t \t \t \t \t \t <input name="monitor" type="radio">19" LCD Flat Screen ($300.00)<br> 
 
    \t \t \t \t \t \t \t \t <input name="monitor" type="radio">21" LCD Flat Screen ($350.00)<br> 
 
    \t \t \t \t \t \t \t \t <br> 
 
    \t \t \t \t \t \t \t \t <br> 
 
    \t \t \t \t \t \t \t \t <b>Computer Printer:</b><br><input name="printer" type="radio">Inkjet Printer ($100.00)<br> 
 
    \t \t \t \t \t \t \t \t <input name="printer" type="radio">Laser Printer ($250.00)<br> 
 
    \t \t \t \t \t \t \t \t <input name="printer" type="radio">Color Laser Printer ($350.00)<br> 
 
    \t \t \t \t \t \t \t \t <br> 
 
    \t \t \t \t \t \t \t \t <br> 
 
    \t \t \t \t \t \t \t \t <input type="button" value="Submit" onClick="submit()"> 
 
    \t \t \t \t \t \t \t </font> 
 
      </p> 
 
     </td> 
 
     <td name="tableOne"> 
 
      <img name="caseimg" alt="caseimg" width="125" height="125" src="desktopcase.jpg"> 
 
      <br> 
 
      <img name="monitorimg" alt="monitoring" width="125" height="125" src="17monitor.jpg"> 
 
      <br> 
 
      <img name="printerimg" alt="printerimg" width="125" height="125" src="inkprinter.jpg"> 
 
     </td> 
 
     <td> 
 
      <img name="caseimg" alt="caseimg" width="125" height="125" src="desktopcase.jpg"> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </form> 
 
</body> 
 

 
</html>

出典

2016-04-01 Delusive

あなたは別のコンピュータ言語から来ている必要があります。 JavaScriptは宣言的言語ではありません。変数とオブジェクトを初期化する必要はありません。 I.配列とイメージ。はるかに少ないコードでこれを行うことができます。あなたが私に数分を与えるなら、私はあなたにいくつかのコードを示すことができます。 –

あなたは配列を初期化することができますが、あなたはそれをやった方法は、変数を作成するために、簡単に、より一般的であり、あなたは何を知っているならば、ちょうど角括弧内の値を配置彼らはなるだろう。

var imgArray = ["desktopcase.jpg","minidesktop.jpg","fulltower.jpg","17monitor.jpg","19monitor.jpg","21monitor.jpg","inkprinter.jpg","laserprinter.jpg","colorlaserprinter.jpg"];

私はラジオボタンのすべてをつかむためのjQueryを使用し、それらにonClickイベントリスナーを配置し、そのアクションを実行します、関数。

$('input[type="radio"]').on('click', radioIptFunc);

これで楽しい部分です。

function radioIptFunc(){ 
      var fileReg = /(\w*)/, //regular expression to get the file name without the extension from the imgArray array. 
       gotVal = this.value, // get the radio input value. 
       fileName = '', // sets up a variable to store the file name 
       foundi = '', // sets up a variable to store found image file name from the array filter. 
       nameAtr = this.name; // gets the name from the clicked radio button. 

       // this is the array filter that looks to see if the selected radio buttons value is in the array. the result is stored in the returned filter array (foundi). 
       foundi = imgArray.filter(function(val){ 
        fileName = val.match(fileReg)[0]; 
        return fileName === gotVal; 
       }); 

      // switch statement that matches the selected product to the image/s that are to be changed. 
      switch(nameAtr){ 
       case 'computerCase': 
        $('[name="caseimg"]').attr('src', foundi); 
        $('[name="caseimg"]').attr('alt', gotVal); 
        break; 
       case 'monitor': 
        $('[name="monitorimg"]').attr('src', foundi); 
        $('[name="monitorimg"]').attr('alt', gotVal); 
        break; 
       case 'printer': 
        $('[name="printerimg"]').attr('src', foundi); 
        $('[name="printerimg"]').attr('alt', gotVal); 
        break; 
       default: 
        console.log('no name found.'); 
      } 
     }

出典

2016-04-01 18:51:22

画像が明確に定義されても変更されない

答えて

関連する問題