Get Clicked Element's ID And Include It In A Function With Pure JS?

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

icon1

Solution 1:

<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>

Solution 2:

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

Solution 3:

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>

Solution 4:

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>

Solution 5:

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>

Share