Passing an html element to a function in javascript

Question

...This has been asked a bunch of times, but I still cannot solve my problem.

I have a list of elements, created dynamically, defined by class 'box', as follows:

<div class="box">
    <button onclick="buttonFunction(element.inputBox)"></button>
    <input class="inputBox"></input>
</div>
<div class="box">
    <button onclick="buttonFunction(element.inputBox)"></button>
    <input class="inputBox"></input>
</div>
    ....
<div class="box">
    <button onclick="buttonFunction(element.inputBox)"></button>
    <input class="inputBox"></input>
</div>

I then want the function 'buttonFunction(element)' to look as follows:

function buttonFunction(element){
    $('.element').show()  
}

Where element is the specific inputbox to the specific box div.

Why dont you generate the div's proving also an ID? You can generate something like <div class="box" item-id="2"> And then find it with that — jviotti
– jviotti, Commented Jan 23, 2013 at 19:43

Madbreaks · Accepted Answer · 2014-01-10 19:29:35Z

2

So long as you're using jQuery, it's much easier:

HTML:

<div class="box">
    <button></button>
    <input class="inputBox"></input>
</div>
<div class="box">
    <button></button>
    <input class="inputBox"></input>
</div>
<div class="box">
    <button></button>
    <input class="inputBox"></input>
</div>

JS (put this inside $(document).ready(...):

$('.box button').click(function(){
   $(this).next('.inputBox').show();
});

Here's an example

edited Jan 10, 2014 at 19:29

answered Jan 23, 2013 at 19:43

Madbreaks

19.6k7 gold badges62 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jose Calderon Over a year ago

I can't get the $('.box button').click() to trigger...weird.

Madbreaks Over a year ago

@JoseCalderon Does it work in the jsfiddle I posted? It does for me. Perhaps you're using show() when you should instead be setting the elements visibility:visible?

Jose Calderon Over a year ago

If the button is actually a div with class="button" how does that change the event listener? $('.box .button').click()? ...I omitted this from the example for simplicity.

Madbreaks Over a year ago

$('.box .button'). But if it behaves like a button, just use a button! They're very flexible.

Travis J · Accepted Answer · 2013-01-23 19:49:06Z

2

There a lot of ways to approach this scenario. Usually placing a click event on the element with html is not best practice. This is a strongly typed solution which fits into your example. It will pass the element which was clicked (the button element) into the function. Then, then function as written will find the closest element with class inputBox and issue jquery's show() to it.

html

<button onclick="buttonFunction(this)"></button>

js

function buttonFunction(el){
 $(el).parent().find('.inputBox').show();  
}

edited Jan 23, 2013 at 19:49

answered Jan 23, 2013 at 19:44

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

3 Comments

Musa Over a year ago

.inputBox is a sibling not an ancestor.

Travis J Over a year ago

@Madbreaks - So is the op.

Travis J Over a year ago

@Musa - Doesn't closest search siblings? oops, I will edit that part out.

Collectives™ on Stack Overflow

Passing an html element to a function in javascript

2 Answers 2

4 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Related