Get clicked element's ID and include it in a function with pure JS?

Question

I need to display different output according to each different icon clicked without defining separate functions;

HTML:

<p onclick="expand()" id="i1">icon1</p>
<p onclick="expand()" id="i2">icon2</p>
<p onclick="expand()" id="i3">icon3</p>
<div id="blocki1"></div>
<div id="blocki2"></div>
<div id="blocki3"></div>

Can I do something like this with JS?

function expand() {
document.getElementById("block" + this.id).style.display = "block";
}

I've tried the method above which apparently didn't work, I need to a)store icon's id and b) combine the id with string. Don't sure if that's possible.

Is it `document.getElementById("block" + this.getAttribute('id')`? — deEr., Apr 23 '18 at 09:31

score 2 · Accepted Answer · answered Apr 23 '18 at 09:34

<p onclick="expand(this.id) id="i1">icon1</p>
<p onclick="expand(this.id) id="i2">icon2</p>
<p onclick="expand(this.id) id="i3">icon3</p>
<div id="blocki1"></div>
<div id="blocki2"></div>
<div id="blocki3"></div>
<script>
function expand(e) {
document.getElementById("block" + e).style.display = "block";
}}
</script>

score 2 · Answer 2 · answered Apr 23 '18 at 09:41

First.. You have 4 typos. First 3 are that you don't have closing " after onclick="expand()

<p onclick="expand() id="i1">icon1</p>
<!-- There needs to be " after expand() -->

Last typo is you have extra closing } after expand function.

Now, since you're not using addEventListener API, the value of this will not be set on your expand function. So you need to pass your current element as a parameter to the function.

<p onclick="expand(this)" id="i1">icon1</p>
<p onclick="expand(this)" id="i2">icon2</p>
<p onclick="expand(this)" id="i3">icon3</p>
<div id="blocki1">blocki1</div>
<div id="blocki2">blocki2</div>
<div id="blocki3">blocki3</div>

(Added some place holder text to divs to see if this works)

Lastly, access the current element in your function as a first parameter.

function expand(el) {
  document.getElementById("block" + el.id).style.display = "block";
}

This is kinda identical to @ajith's solution :) Also thanks for figuring out the typos. — pploypiti, Apr 23 '18 at 09:47

score 0 · Answer 3 · answered Apr 23 '18 at 09:33

Pass parameters to the function

You need to pass some data (e.g. the reference to the object, its name, or whatever else you need) to the function you're calling.

For example, look at the sample code from https://www.w3schools.com/jsref/event_onclick.asp

<p onclick="myFunction(this, 'red')">Click me to change my text color.</p>

<script>
function myFunction(elmnt,clr) {
    elmnt.style.color = clr;
}
</script>

score 0 · Answer 4 · answered Apr 23 '18 at 09:42

I might approach it slightly differently by removing the inline JS, and using classes and data attributes. Here I have classes and data attributes on all the elements. I attach click event listeners to the "buttons" which call the handleClick function. This function checks the data id attribute of the button and grabs the corresponding slide, adding a "show" class to its class list.

const buttons = document.querySelectorAll('.button');

buttons.forEach(button => {
  button.addEventListener('click', handleClick, false);
});

function handleClick(e) {
  const id = e.target.dataset.id;
  const slide = document.querySelector(`.slide[data-id="${id}"]`);
  slide.classList.add('show');
}

.slide {
  display: none;
}

.show {
  display: block;
}

<p class="button" data-id="1">icon1</p>
<p class="button" data-id="2">icon2</p>
<p class="button" data-id="3">icon3</p>
<div class="slide" data-id="1">blocki1</div>
<div class="slide" data-id="2">blocki2</div>
<div class="slide" data-id="3">blocki3</div>

score 0 · Answer 5 · answered Apr 23 '18 at 09:43

Your code should like this

<p onclick="expand(this) id="i1">icon1</p>
<p onclick="expand(this) id="i2">icon2</p>
<p onclick="expand(this) id="i3">icon3</p>
<div id="blocki1"></div>
<div id="blocki2"></div>
<div id="blocki3"></div>

<script>
function expand(elm) {
       document.getElementById("block" + elm.id).style.display = "block";
    }
</script>

score 0 · Answer 6 · answered Apr 23 '18 at 09:46

If you are a beginner, I would suggest you to avoid practice of adding handlers in HTML, before it becomes your coding attitude.

Instead, add eventlisteners for them in js. Separation of concerns is really big theory.

And it's relativelyeasy to deal with this in event handlers

You can read more about it here

var ps = Array.from(document.querySelectorAll("p"));

for(var i=0; i< ps.length; i++){
  ps[i].addEventListener(("click"), function(){
   document.getElementById("block" + this.id).style.display = "block";
  })
}

div{
  display: none;
}

<p  id="i1">icon1</p>
<p  id="i2">icon2</p>
<p id="i3">icon3</p>
<div id="blocki1">This is 1</div>
<div id="blocki2">This is 2</div>
<div id="blocki3">This is 3</div>

Yep, I'm a total beginner. Sorry but I don't know what's the purpose of the loop? — pploypiti, Apr 23 '18 at 09:54
`document.querySelectorAll("p")` gives your the node list of all the matching elements. So, you'll have to add a listener to all of the nodes in the node list/ That's why loop is there — Muhammad Usman, Apr 23 '18 at 09:56

Get clicked element's ID and include it in a function with pure JS?

6 Answers6

Pass parameters to the function

Linked