Javascript从元素获取ID然后使用它

-4

你能帮我解决这个问题吗？我无法为我的其他功能使用return x值。我想要点击某个元素时，然后脚本加载单击元素的ID，然后使用此ID更改元素的颜色。对我的问题有更好的解决方案吗？（在纯JS中，不在Jquery中）谢谢。Javascript从元素获取ID然后使用它

<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>

来源

2016-09-28 Ante Olić

您必须使用仅一个街区 –

将您的代码更改为下方。

<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>

来源

2016-09-28 19:12:00

任何人都可以格式化我的代码？我在移动应用程序，无法格式化 –

@TheOneAndOnlyChemistryBlob谢谢。 –

你的意思是什么格式？但是这个代码不工作。这第二个功能不能从第一个功能得到这个x值 –

好吧，我发现我的问题的解决方案。解决方案将我的所有脚本放在一个函数中，而不是工作。我在学习关于1坐骑的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>

来源

2016-09-30 14:14:12

Javascript从元素获取ID然后使用它

回答

相关问题