Javascriptは要素からIDを取得してから使用します

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

[OK]を、私は私の問題の解決策を見つけます。 解決策は、すべてのスクリプトを1つの機能に置き、evrything workよりも優れていました。 私はJSについて約1台のマウントを学びましたが、今では簡単なライトオフのゲームを1つ作りました。 今、私はすべてのセルの色をチェックし、ゲームの終わりを警告する機能を念頭に置いていますが、なぜ質問がうまく投票されていないので、新しい質問に答えることができません。ここで

は、私のコードの例です：

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>