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然後使用它

回答

相關問題