자바 스크립트에서 요소를 가져온 다음

Question

이 문제를 해결할 수 있습니까? 다른 함수에 x 값을 사용할 수 없습니다. 나는 어떤 요소를 클릭하고 나서 클릭 된 요소의 ID를로드 한 다음이 ID로 요소의 색을 변경하려고합니다. 내 문제에 대한 더 나은 해결책이 있습니까? (순수 JS, Jquery가 아님) 감사.

<p id="1">foo</p> 
<p id="2">bar</p> 
<p id="3">baz</p> 




<script> 

    document.addEventListener('click', function(e) { 
    x=e.target.id; 
return x 


    }); 

    document.getElementById(x).onclick = 


    function(x) { 

    if (document.getElementById(x).style.backgroundColor !== 'yellow') { 
     document.getElementById(x).style.backgroundColor = 'yellow'; 
    } 
    else { 
    document.getElementById(x).style.backgroundColor = 'red'; 
    } 
    }; 
</script> 

Answer 1

아래 코드를 변경하십시오.

<p id="1">foo</p> 
<p id="2">bar</p> 
<p id="3">baz</p> 

document.addEventListener('click', function(e) { 
     x=e.target.id; 

     function() { 
      var bgColor = document.getElementById(x).style.backgroundColor; 
      if (bgColor !== 'yellow') { 
       bgColor = 'yellow'; 
      } 
      else { 
       bgColor = 'red'; 
      } 
     } 
    }); 
</script> 

Answer 2

가 좋아 나는 내 문제에 대한 해결책을 찾을 수 있습니다. 해결책은 내 모든 스크립트를 하나의 기능으로 처리하고 작업을 수행하는 것보다 낫습니다. 나는 JS에 관해서 JS를 배우고 있으며, 이제는 하나의 간단한 LIGHTS OFF 게임을 만들었습니다. 이제는 모든 셀의 색을 확인하고 게임의 끝을 경고하는 몇 가지 기능을 배웠지 만 질문에 대한 투표가 잘 안되어 새로운 질문에 답할 수 없으며 그 이유를 모르겠습니다. 여기

내 코드의 예는 다음과 같습니다

document.addEventListener('click', function(e) { 
 
    var x = e.target.id 
 

 

 

 
    var up = ((Math.floor(x.charAt(0))-1).toString()).concat(x.charAt(1)); 
 
    var down = ((Math.floor(x.charAt(0))+1).toString()).concat(x.charAt(1)); 
 
    var left = (x.charAt(0)).concat((Math.floor(x.charAt(1))-1).toString()); 
 
    var right = (x.charAt(0)).concat((Math.floor(x.charAt(1))+1).toString()); 
 

 
    
 
    
 
    if(document.getElementById(x).style.backgroundColor == ''){document.getElementById(x).style.backgroundColor = 'black';} 
 
    else{document.getElementById(x).style.backgroundColor ='';} 
 

 
    if(document.getElementById(up)!=null){ 
 
    if(document.getElementById(up).style.backgroundColor == ''){document.getElementById(up).style.backgroundColor = 'black';} 
 
    else{document.getElementById(up).style.backgroundColor ='';}} 
 

 
    if(document.getElementById(down)!=null){ 
 
    if(document.getElementById(down).style.backgroundColor == ''){document.getElementById(down).style.backgroundColor = 'black';} 
 
    else{document.getElementById(down).style.backgroundColor ='';}} 
 
    
 
    if(document.getElementById(left)!=null){ 
 
    if(document.getElementById(left).style.backgroundColor == ''){document.getElementById(left).style.backgroundColor = 'black';} 
 
    else{document.getElementById(left).style.backgroundColor ='';}} 
 
    
 
    if(document.getElementById(right)!=null){ 
 
    if(document.getElementById(right).style.backgroundColor == ''){document.getElementById(right).style.backgroundColor = 'black';} 
 
    else{document.getElementById(right).style.backgroundColor ='';}} 
 

 

 
    // var all = document.getElementsByTagName("TD"); 
 
    // var i; 
 
    // for (i = 0; i < all.length; i++) { 
 
    // all[i].style.backgroundColor!=='yellow'; 
 
    // alert('a') 
 
    // break} 
 

 
    }) 
 

 

td { 
 
    padding: 50px; 
 
    background-color: yellow;

<table> 
 
<tr> 
 
    <td id='11'></td> 
 
    <td id='12'></td> 
 
    <td id='13'></td> 
 
    <td id='14'></td> 
 
    <td id='15'></td> 
 
</tr> 
 
<tr> 
 
    <td id='21'></td> 
 
    <td id='22'></td> 
 
    <td id='23'></td> 
 
    <td id='24'></td> 
 
    <td id='25'></td> 
 
</tr> 
 
<tr> 
 
    <td id='31'></td> 
 
    <td id='32'></td> 
 
    <td id='33'></td> 
 
    <td id='34'></td> 
 
    <td id='35'></td> 
 
</tr> 
 
    <tr> 
 
    <td id='41'></td> 
 
    <td id='42'></td> 
 
    <td id='43'></td> 
 
    <td id='44'></td> 
 
    <td id='45'></td> 
 
    </tr> 
 
    <tr> 
 
    <td id='51'></td> 
 
    <td id='52'></td> 
 
    <td id='53'></td> 
 
    <td id='54'></td> 
 
    <td id='55'></td> 
 
    </tr> 
 
</table>