0

getElementByClassName の使用中にエラーが発生しました。私の意図は、各オプションの色が異なるドロップダウンリストからオプションを選択する際に、複数のテキストの色を変更したいということです。

ここでは、単一の className をすべてのテキストに割り当てています。

これが私のコードです。

<html>
   <head>
      <script type="text/javascript">
         function copyText(selectedElement) {
            var className = document.getElementsByClassName("incomeTypeSalary");
            for (i = 0; i < className.length; i++)

            {
               className[i].style.color = selectedElement.options[selectedElement.selectedIndex].style.color;
            }

         }
      </script>
   </head>

   <body>
      <div style="width:600px;border:1px solid black;float:left">
         <select width="200px" id="selectedElement" onclick="copyText(selectedElement)">
            <option style="color:red">Theta Saving Plan</option>
            <option style="color:green">Roth Plan</option>
            <option style="color:yellow">IRG Plan</option>
            <option style="color:PINK">II Plan</option>
         </select>
      </div>
      <div style="width:300px;border:1px solid black;float:left">
         <span style="padding-top:30px;font-size:24px;font-family:arial:" class="incomeTypeSalary">Contribution</span>
         <table style="padding-top:24px">
            <tr>
               <td>
                  <span class="incomeTypeSalary">Annual Salary</span>
               </td>
               <td>
                  <input type="text" style="width:81px; direction:rtl;">
               </td>
            </tr>
            <tr>
               <td>
                  <span class="incomeTypeSalary2">Annual Coomission</span>
               </td>
               <td>
                  <input type="text" style="width:81px; direction:rtl;">
               </td>
            </tr>
            <tr>
               <td>
                  <span class="incomeTypeSalary3">Annual Bonus</span>
               </td>
               <td>
                  <input type="text" style="width:81px; direction:rtl;">
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>

PLは私を助けてくれます。事前に感謝します。

4

1 に答える 1

1

onclickをに変更onchange

http://jsfiddle.net/wQWdg/

これはすべてのブラウザで機能します

function getElementsByClassName(className) {
    if (document.getElementsByClassName) {
        return document.getElementsByClassName(className);
    }
    else {
        return document.querySelectorAll('.' + className);
    }
}​
于 2012-04-15T06:44:46.423 に答える