如何使用 Javascript 添加 Id 屬性？

Question

這里的任何人都可以幫助我解決我的問題。 我一直在嘗試在單擊按鈕時創建按鈕的 ID。 我的頁面中有多個按鈕，我想在單擊它時添加 id 屬性，但請注意，在單擊此按鈕之前沒有 id。 這是我的一些代碼。

<div class="DivButton" style="" onclick="divClick()"></div>
<div class="DivButton" style="" onclick="divClick()"></div>
<div class="DivButton" style="" onclick="divClick()"></div>

這是我的 Html 代碼

function divClick()
{
    $(this).attr("id") =="Active";     
}

這是我的 JavaScript function 但這並沒有達到預期。

Answer 1

您可以將this傳遞給divClick function。

 function divClick(e){ e.id = "Active"; console.log(e); }

 <div class="DivButton" style="" onclick="divClick(this)">a</div> <div class="DivButton" style="" onclick="divClick(this)">b</div> <div class="DivButton" style="" onclick="divClick(this)">c</div>

Answer 2

let btn = document.querySelector('DivButton'); btn.setAttribute("id","Active");

Answer 3

使用內聯事件處理程序通常不是一個好主意。

如果你只給元素添加一個 id，你最終會得到重復的 id，這在 html 中是不允許的。 最好使用 an.active css-class。

該片段使用事件委托。

 document.addEventListener("click", handle); function handle(evt) { if (evt.target.classList.contains("DivButton")) { document.querySelectorAll(".DivButton").forEach( bttn => bttn.classList.remove("active") ); return evt.target.classList.add("active"); } }

 .DivButton { cursor: pointer; width: 125px;l height: 2rem; line-height: 2rem; text-align: center; border: 1px solid #999; margin: 0.3rem; }.active { color: red; background-color: #FFFFC0; }

 <div class="DivButton active">a</div> <div class="DivButton">b</div> <div class="DivButton">c</div>

Answer 4

試試這個 html 代碼

<div class="DivButton" style="" onclick="divClick(this)">Button1</div>
<div class="DivButton" style="" onclick="divClick(this)">Button2</div>
<div class="DivButton" style="" onclick="divClick(this)">Button3</div>

Javascript 代碼 id 應該是唯一的

<script>
function divClick(e){
 e.id = Math.floor(Math.random() * 10);   
 }
</script>

Answer 5

您可能應該檢查id active 是否存在，如果存在則將其刪除，這樣可以將其添加到新按鈕中。

 function divClick(e,idToAdd){ if(document.querySelector('#active')){ document.querySelector('#active').removeAttribute('id'); } e.id = 'active'; }

 .DivButton { display: inline-block; margin: 1rem; padding: .5rem 3rem; background: #000; color: #fff; cursor: pointer; } #active { background: red; }

 <div class="DivButton" style="" onclick="divClick(this)">a</div> <div class="DivButton" style="" onclick="divClick(this)">b</div> <div class="DivButton" style="" onclick="divClick(this)">c</div>