Get Clicked Element's Id And Include It In A Function With Pure Js?
icon1
Solution 1:
<ponclick="expand(this.id) id="i1">icon1</p><ponclick="expand(this.id) id="i2">icon2</p><ponclick="expand(this.id) id="i3">icon3</p><divid="blocki1"></div><divid="blocki2"></div><divid="blocki3"></div><script>functionexpand(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()
<ponclick="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.
functionexpand(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
<ponclick="myFunction(this, 'red')">Click me to change my text color.</p><script>functionmyFunction(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);
});
functionhandleClick(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;
}
<pclass="button"data-id="1">icon1</p><pclass="button"data-id="2">icon2</p><pclass="button"data-id="3">icon3</p><divclass="slide"data-id="1">blocki1</div><divclass="slide"data-id="2">blocki2</div><divclass="slide"data-id="3">blocki3</div>
Solution 5:
Your code should like this
<ponclick="expand(this) id="i1">icon1</p><ponclick="expand(this) id="i2">icon2</p><ponclick="expand(this) id="i3">icon3</p><divid="blocki1"></div><divid="blocki2"></div><divid="blocki3"></div><script>functionexpand(elm) {
document.getElementById("block" + elm.id).style.display = "block";
}
</script>
Post a Comment for "Get Clicked Element's Id And Include It In A Function With Pure Js?"