CODEWITHSUNDEEP
javascriptjquery
Silly Question Boy
Silly Question Boy

Reputation: 49

Function to obtain the id on click

I've got myself all in a mess. When each of the "..." within the span is clicked, I would like the myDropdown div containing "Report" to be shown next to the span. Then I would like for when the corresponding Report is clicked to return the id of the "elementid" class in this case either 1 or 2 but I wasn't sure what to put in the reportFunction 

<html>
<style>
.dropbtn {
background-color: white;
color: black;
padding: 2px;
font-size: 30px;
border: none;
cursor: pointer;
font-weight: bold;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
background-color: #f9f9f9;
min-width: 160px;
font-size:10px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border: 1px solid lightgrey;
z-index: 1;
float: left;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown a:hover {background-color: #f1f1f1;cursor:pointer;}

.show {display:block;}
</style>

<span class="dropdown">
<button onclick="myFunction()" class="dropbtn">...</button>
<div id="myDropdown" class="dropdown-content">
<a class="elementid" id="1">Report</a>
</div>
</span>
<p>    
<span class="dropdown">
<button onclick="myFunction()" class="dropbtn">...</button>
<div id="myDropdown" class="dropdown-content">
<a class="elementid" id="2">Report</a>
</div>
</span>

<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
var id = document.getElementsByID("id");
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('show')) {
    openDropdown.classList.remove('show');
  }
}
}
}

function reportFunction() {

}
</script>
</html>

Upvotes: 0

Views: 94

Answers (1)

GertG
GertG

Reputation: 979

Something like this should get you the id you want. It goes up to the containing span with parent() and then gets the element with class elementId within.

function reportFunction() {
    var id = $(this).parent().find('.elementid');
    ... //whatever you need to do
}

Your code has other problems though. You have two div elements with the same id myDropdown. Your current code with getElementById will always get the first one. You need to either specify a class and no id on them, and get the right one in the same way as above, or to use one div that you remove and attach to the correct span as needed.

Upvotes: 1

Related Questions