I have many buttons and also one popup div which includes short or long content depended on value from a map.
Case 1: If content is hidden(windows.onload, it is hidden), if any button is clicked, the content should be visible then if same button is clicked, the content should be hidden again.
Case 2: If content is visible due to a clicked button, if any button(except same button like in case 1) is clicked, the content should not be hidden, keep being visible.
In the code below, i could manage to handle case 1 but not case 2. I think, i need to make a comparison function between first and last time called values of buttons but i cant find the way of storing first value so i cant make a comparison.
Should i use "JavaScript Closures" because i think that it may work.https://www.w3schools.com/js/tryit.asp?filename=tryjs_function_closures5 if i should, is there any workaround? i prefer to use another method rather than to use Closures because i dont understand logic of "Closures" enough for now.
Thank you.
function infoFunc(clicked_value) {
let infoText = "";
let control = "q1";
for (let qvalue of questionDetails.keys()) {
if (clicked_value == qvalue) {
let y = questionDetails.get(qvalue);
infoText = `<p>${y}</p>`;
document.getElementById("questioninfoDiv").innerHTML = infoText;
}
}
popupcontrolFunc(clicked_value, control);
}
/* Functions: " control of information popup" */
function popupcontrolFunc(clicked_value, control) {
if (control == clicked_value) {
popupTrueOrFalse();
} else {
popupTrue();
control = clicked_value;
}
}
function popupTrueOrFalse() {
let popup = document.getElementById("questioninfoDiv");
popup.classList.toggle("show");
}
function popupTrue() {
let popup = document.getElementById("questioninfoDiv");
popup.classList.toggle("show", true);
}<button type="button" id="questionInfoimg" value="${key}" onClick="infoFunc(this.value)"><img src="question-mark.svg"
alt="Info_Mark">
</button>edit: i guess, i need to make it more clear. Please check out the https://jsfiddle.net/GrayCollar/odnhgkpx/22/ Actually, i think, i need a algorithm and a way to use that algorithm like "js closures". i am not sure about "js closures", just try to explain what i need.
You don't need closures.
The this keyword will do the trick. According to Mozilla Developer Network,
When a function is used as an event handler, its this is set to the element on which the listener is placed (some browsers do not follow this convention for listeners added dynamically with methods other than
addEventListener()).
This will not work in strict mode. In that case, you will have to pass an event object into the function, which looks like so.
element.addEventListener(eventString, function(e){
//e is the event object
});
This event object has a currentTarget property, which is basically the element that the event is target to, which in this case is the button that is clicked. All put together, it looks like this:
function eventHandler(e){
//use e.currentTarget
}
element.addEventListener(eventString, eventHandler);