2012-04-15 2 views
-1

안녕 얘들 아 getElementByClassName 사용하는 동안 오류가 발생했습니다. 내 의도는 각 옵션의 색상이 다른 드롭 다운 목록에서 옵션을 선택하는 것보다 여러 텍스트의 색을 변경하려고한다는 것입니다.getElementsByClassName을 사용하는 방법?

여기서는 모든 텍스트에 하나의 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 도움이됩니다. 사전에 감사합니다.

+2

당신의 오류 시나리오 – UVM

+0

제목을 붙여주십시오 :'getElementByClassName' ->'getElementsByClassName ' –

답변

1

변경이 모든 브라우저에서 작동합니다 onclick

http://jsfiddle.net/wQWdg/


onchange

function getElementsByClassName(className) { 
    if (document.getElementsByClassName) { 
     return document.getElementsByClassName(className); 
    } 
    else { 
     return document.querySelectorAll('.' + className); 
    } 
}​ 
+0

안녕하세요, 고마워요. 내가 말한 .... 시도 bt는 여전히 NT 작동 .. 색상 않습니다 텍스트로 다시 반영 –

+0

작동 샘플에 대한 링크를 확인 –

+0

이봐, 죄송하지만, IE8과 파이어 폭스에서 위의 링크를 시도했지만 작동하지 않습니다. –

관련 문제