How to use same function for different IDs in Javascript using If statement

Question

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";
    }
}

Ram Chander · Accepted Answer · 2019-07-25 12:16:25Z

1

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>

answered Jul 25, 2019 at 12:16

Ram Chander

1,69611 gold badges26 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ellipsis · Accepted Answer · 2019-07-25 09:52:54Z

0

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>

answered Jul 25, 2019 at 9:52

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

Comments

sdn404 · Accepted Answer · 2019-07-25 09:56:15Z

0

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>

answered Jul 25, 2019 at 9:56

sdn404

6345 silver badges7 bronze badges

Comments

Fahad Ahmed · Accepted Answer · 2019-07-25 10:49:38Z

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.

Collectives™ on Stack Overflow

How to use same function for different IDs in Javascript using If statement

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related