Shubham Bhewanewala Shubham Bhewanewala - 5 months ago 20
Javascript Question

Want PopUp Message over each div tag



function myFunc(n) {
var v = document.createElement("span");
var h = document.createTextNode("See This");
v.id = "myPopup";
v.className = "popuptext";
v.appendChild(h);
var p = document.getElementsByClassName("popup");

p[n].appendChild(v);
myFunction();
//document.getElementById("myPopup").style.left ="0px";
}
function myFunction() {
var v = document.getElementById('myPopup');
v.classList.toggle('show');
}

.popup {
position: relative;
display: inline-block;
cursor: pointer;

}

.popup .popuptext {
visibility: hidden;
width: 190px;
background-color: blue;
color: white;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
bottom: 125%;
left:0px;
margin-left: -80px;

}

.popuptext::after {
content: "";
border-width: 5px;
border-color: blue transparent transparent transparent;
position: absolute;
border-style: solid;
top: 100%;
left: 50%;
}

.show {
visibility: visible !important;

}

<h2>Hi</h2>

<div class="popup" onclick="myFunc(0) ">
Click Here1

</div>&spades;&spades;
<div class="popup" onclick="myFunc(1) ">
Click Here

</div>&spades;&spades;
<div class="popup" onclick="myFunc(2) ">
Click Here2
</div>





I want when user click over div segment popup should come over same div. When user click on first div tag popup work correctly but when clicked over second div tag, popup appears but over first div tag. Same happens with third. Please Help.

Answer

You are dynamically creating myPopup for every click. this will create elements with duplicate ids and when you fetch element, element that satisfies first will be used. Try adding n to the id of popup like v.id = "myPopup_" + n; and then pass it to myFunction and show it based on this n

function myFunc(n) {
  var v = document.createElement("span");
  var h = document.createTextNode("See This");
  v.id = "myPopup_" + n;
  v.className = "popuptext";
  v.appendChild(h);
  var p = document.getElementsByClassName("popup");

  p[n].appendChild(v);
  myFunction(n);
  //document.getElementById("myPopup").style.left ="0px";
}

function myFunction(id) {
  var v = document.getElementById('myPopup_'+id);
  v.classList.toggle('show');
}
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.popup .popuptext {
  visibility: hidden;
  width: 190px;
  background-color: blue;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  bottom: 125%;
  left: 0px;
  margin-left: -80px;
}
.popuptext::after {
  content: "";
  border-width: 5px;
  border-color: blue transparent transparent transparent;
  position: absolute;
  border-style: solid;
  top: 100%;
  left: 50%;
}
.show {
  visibility: visible !important;
}
<h2>Hi</h2>

<div class="popup" onclick="myFunc(0) ">
  Click Here1

</div>&spades;&spades;
<div class="popup" onclick="myFunc(1) ">
  Click Here

</div>&spades;&spades;
<div class="popup" onclick="myFunc(2) ">
  Click Here2
</div>

Note: Ideally you should just add class and using querySelector you should search inside current div.

function myFunc(n) {
  var v = document.createElement("span");
  var h = document.createTextNode("See This");
  v.className = "popuptext";
  v.appendChild(h);
  var p = document.getElementsByClassName("popup");

  p[n].appendChild(v);
  myFunction(p[n]);
  //document.getElementById("myPopup").style.left ="0px";
}

function myFunction(el) {
  var v = el.querySelector(".popuptext")
  v.classList.toggle('show');
}
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.popup .popuptext {
  visibility: hidden;
  width: 190px;
  background-color: blue;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  bottom: 125%;
  left: 0px;
  margin-left: -80px;
}
.popuptext::after {
  content: "";
  border-width: 5px;
  border-color: blue transparent transparent transparent;
  position: absolute;
  border-style: solid;
  top: 100%;
  left: 50%;
}
.show {
  visibility: visible !important;
}
<h2>Hi</h2>

<div class="popup" onclick="myFunc(0) ">
  Click Here1

</div>&spades;&spades;
<div class="popup" onclick="myFunc(1) ">
  Click Here

</div>&spades;&spades;
<div class="popup" onclick="myFunc(2) ">
  Click Here2
</div>