CODEWITHSUNDEEP
javascriptif-statement
Manoj Manduva
Manoj Manduva

Reputation: 1

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

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

Answers (4)

Ram Chander
Ram Chander

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

Fahad Ahmed
Fahad Ahmed

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

sdn404
sdn404

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

ellipsis
ellipsis

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

Related Questions