How do I Add Id Attribute Using Javascript?

Question

Can Anyone here could help me to solve my problem. I have been trying to create Id of a button when it is clicked. I have multiple button in my page and I want to and id attribute when it is clicked but note that this button had no id before it is clicked. Here is some of my code.

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

This is my Html code

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

Here is my JavaScript function but this does not worked as expectation.

Answer 1

You can pass this into 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

It is generally not a good idea to use inline event handlers.

If you only add an id to elements, you'll end up with duplicate id's, which is not allowed in html. Better use an.active css-class.

The snippet uses event delegation .

 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

Try this html code

<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 code id should be unique

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

Answer 5

You should probably check if the id active exists and remove it if it does so it can be added to the new button.

 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>