Javascript从元素获取id，然后使用它

Javascript get id from element and then use it

本文关键字：然后 id 元素 获取 Javascript      更新时间：2023-09-26

你能帮我解决这个问题吗?我不能在其他函数中使用返回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>

把你的代码改成下面的

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

好了，我找到了解决问题的方法。解决方案是把我所有的脚本在一个函数，然后一切工作。我学习JS关于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>

相关文章：