Reputation: 1
I have to open different Modals based on the onClick event on IDs using same Function. I'm using If condition to check, but it is always taking the first condition to be true. Please help.
//html
<div id="Remote-Parking" class="element parking" onclick="modalFunction()">Remote-Parking</div>
<div id="Emergency-Braking" class="element collision-detection" onclick="modalFunction()">Emergency-Braking</div>
//javascript
function modalFunction() {
if (document.getElementById('Emergency-Braking').onclick) {
document.getElementById('Popup-Emergency-Braking').style.display="block";
}
if (document.getElementById('Remote-Parking').onclick) {
document.getElementById('Popup-Remote-Parking').style.display="block";
}
}
Upvotes: 0
Views: 427
Reputation: 1518
In the way you have asked the questioned, my answer is following. Hope it will help you
<div id="Remote-Parking" class="element parking" onclick="modalFunction( this.id )">Remote-Parking</div>
<div id="Emergency-Braking" class="element collision-detection" onclick="modalFunction( this.id )">Emergency-Braking</div>
<script>
function modalFunction( id ) {
if ( id == 'Remote-Parking') {
//document.getElementById('Popup-Emergency-Braking').style.display="block";
console.log('IF');
} else if ( id == 'Emergency-Braking' ){
//document.getElementById('Popup-Remote-Parking').style.display="block";
console.log('ELSE');
} else {
// in case id didn't find
// do something;
}
}
</script>
Upvotes: 1
Reputation: 44
You have to pass the id as a argument in a function,
onclick="modalFunction('Remote-Parking')"
Now get the value by its parameter.
function modalFunction(val)
Then check the value in if/else condition
if (val === 'Emergency-Braking')
//javascript
function modalFunction(val) {
if (val === 'Emergency-Braking') {
// document.getElementById('Popup-Emergency-Braking').style.display = "block";
console.log("Emergency-Braking")
}else if (val === 'Remote-Parking') {
// document.getElementById('Popup-Remote-Parking').style.display = "block";
console.log("Popup-Remote-Parking")
}
}
//html
<div id="Remote-Parking" class="element parking" onclick="modalFunction('Remote-Parking')">Remote-Parking</div>
<div id="Emergency-Braking" class="element collision-detection" onclick="modalFunction('Emergency-Braking')">Emergency-Braking</div>
I hope it would be your answer.
Upvotes: 0
Reputation: 624
you can do something similar to this:
function modalFunction(val) {
if(val == "park") {
console.log("park");
} else if(val == "brake") {
console.log("brake");
}
}
<div id="Remote-Parking" class="element parking" onclick="modalFunction('park')">park</div>
<div id="Emergency-Braking" class="element collision-detection" onclick="modalFunction('brake')">brake</div>
Upvotes: 0
Reputation: 12152
You can use the this
keyword as a parameter in the function call and manipulate it inside the function
function modalFunction(e) {
if(e.getAttribute("id")=="Emergency-Braking")
console.log("Emergency-Braking");
if(e.getAttribute("id")=="Remote-Parking")
console.log("Remote-Parking");
}
<div id="Remote-Parking" class="element parking"
onclick="modalFunction(this)">Remote-Parking</div>
<div id="Emergency-Braking" class="element collision-detection" onclick="modalFunction(this)">Emergency-Braking</div>
Upvotes: 0