Determining by function the element ID responsible for the function call. No jquery

Question

I've assigned the same function to 2 different div elements. I'd like the function to determine which div element called the function by it's id. No jquery.

Am just not sure how to compare values with in the I assume would be sufficient if statement.

<head>
<script>
var x = document.getElementById('one')
var y = document.getElementById('two')
function foo(){
 if(????){
  x.style.color='red'
 }
 else if(????){
  y.style.color='red'
 }
}
</script>
<style>
 #one, #two{width:50px; height:50px; border: solid black 5px;}
</style>
</head>
<div id='one' onclick='foo()'>hello</div>
<div id='two' onclick='foo()'>world</div>

Basically have div 'one' || 'two' call function foo() and have one of the responsible ID's properties changed.

score 2 · Answer 1 · answered Feb 03 '19 at 18:01

2

Pass the event object and get the element through currentTarget:

function foo(e){
  const currEl = e.currentTarget;
  if (currEl.id === 'one') {
    currEl.style.background = 'red';
  }
  if (currEl.id === 'two') {
    currEl.style.background = 'green';
  }
}

<div id='one' onclick='foo(event)'>hello</div>
<div id='two' onclick='foo(event)'>world</div>

answered Feb 03 '19 at 18:01

quirimmo

9,800
3
30
45

What would be the difference if running it as if and else if & if and if? – Michael Feb 03 '19 at 18:19
in this practicle case none, but in general if you will have another element, `if/else` won't work. I just do prefer multiple ifs when the conditions you are checking are not mutual exclusive. But feel free to use `if/else` depending on your use case – quirimmo Feb 03 '19 at 18:30

score 0 · Answer 2 · answered Feb 03 '19 at 18:04

0

if i'm not mistaken inline js is disencouraged.

you could do like this:

change the html to this:

 <div class="mycatchid" id='one' >hello</div>
  <div class="mycatchid" id='two' >world</div>

and use this js:

[...document.querySelectorAll('.mycatchid')].forEach(elem =>{
  elem.addEventListener('click', function(){
    if(this.id == 'one') { console.log(this.id)}
    else console.log(this.id);
  })
});

some notes, done in es6, can check a live example: https://jsfiddle.net/jrzh9wxL/

answered Feb 03 '19 at 18:04

José Moreira

21
6

What exactly do you mean by "inline JS" in this particular case? – Michael Feb 03 '19 at 18:34
this: onclick='foo(event)' but i might be wrong. googled a bit: https://stackoverflow.com/a/6348597/10829833 "Inline events (HTML onclick="" property and element.onclick) (...) Most experienced developers shun this method, but it does get the job done; it is simple and direct. You may not use closures or anonymous functions here (though the handler itself is an anonymous function of sorts), and your control of scope is limited." – José Moreira Feb 03 '19 at 20:43

Olafant · Accepted Answer · 2019-02-03T18:42:41.870

You can pass the id of the div to foo.

<div id='one' onclick='foo(this.id)'>hello</div>
<div id='two' onclick='foo(this.id)'>world</div>

Then you can use the given id in the function foo like this:

function foo(id) {
  document.getElementById(id).style.color = 'red';
}

function foo(id) {
  document.getElementById(id).style.color = 'red';
}

 #one, #two{width:50px; height:50px; border: solid black 5px;}

<div id='one' onclick='foo(this.id)'>hello</div>
<div id='two' onclick='foo(this.id)'>world</div>

Determining by function the element ID responsible for the function call. No jquery

3 Answers3