Pass element ID to Javascript function

Question

I have seen many threads related to my question title.

Here is HTML Codes :

<button id="button1" class="MetroBtn" onClick="myFunc(this.id);">Btn1</button>
<button id="button2" class="MetroBtn" onClick="myFunc(this.id);">Btn2</button>
<button id="button3" class="MetroBtn" onClick="myFunc(this.id);">Btn3</button>
<button id="button4" class="MetroBtn" onClick="myFunc(this.id);">Btn4</button>

And a very simple JS function is here :

function myFunc(id){
        alert(id);
}

You can see in JsFiddle.

The problem is :

I have no idea, maybe doesn't pass this.id to myFunc function, or some problem else.

What's the problem ?

Any help would be appreciated.

Took your fiddle and changed 1 thing, this worked: jsfiddle.net/h7kRt/2 — MisterBla
– MisterBla, Commented Jun 25, 2013 at 8:06

MisterBla · Accepted Answer · 2013-06-25 08:11:56Z

17

This'll work:

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
            function myFunc(id)
            {
                alert(id);
            }
        </script>
    </head>

    <body>
        <button id="button1" class="MetroBtn" onClick="myFunc(this.id);">Btn1</button>
        <button id="button2" class="MetroBtn" onClick="myFunc(this.id);">Btn2</button>
        <button id="button3" class="MetroBtn" onClick="myFunc(this.id);">Btn3</button>
        <button id="button4" class="MetroBtn" onClick="myFunc(this.id);">Btn4</button>
    </body>
</html>

answered Jun 25, 2013 at 8:11

MisterBla

2,3951 gold badge20 silver badges29 bronze badges

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

Comments

RobH · Accepted Answer · 2013-06-25 08:10:16Z

11

In jsFiddle by default the code you type into the script block is wrapped in a function executed on window.onload:

<script type='text/javascript'>//<![CDATA[ 
    window.onload = function () {
        function myFunc(id){
            alert(id);     
        }
    }
//]]>  
</script>

Because of this, your function myFunc is not in the global scope so is not available to your html buttons. By changing the option to No-wrap in <head> as Sergio suggests your code isn't wrapped:

<script type='text/javascript'>//<![CDATA[ 
    function myFunc(id){
       alert(id);     
    }
//]]>  
</script>

and so the function is in the global scope and available to your html buttons.

answered Jun 25, 2013 at 8:10

RobH

3,6101 gold badge25 silver badges48 bronze badges

1 Comment

Gem Over a year ago

In my case, if i click the button i have set to display id, screenshot : snag.gy/7bzEWN.jpg code : pastiebin.com/5d35674e2fc31

kusama · Accepted Answer · 2017-11-29 05:54:42Z

9

you can use this.

<html>
    <head>
        <title>Demo</title>
        <script>
            function passBtnID(id) {
                alert("You Pressed:  " + id);
            }
        </script>
    </head>
    <body>
        <button id="mybtn1" onclick="passBtnID('mybtn1')">Press me</button><br><br>
        <button id="mybtn2" onclick="passBtnID('mybtn2')">Press me</button>
    </body>
</html>

answered Nov 29, 2017 at 5:54

kusama

3893 silver badges13 bronze badges

Comments

Sergio · Accepted Answer · 2013-06-25 08:19:09Z

7

Check this: http://jsfiddle.net/h7kRt/1/,

you should change in jsfiddle on top-left to No-wrap in <head>

Your code looks good and it will work inside a normal page. In jsfiddle your function was being defined inside a load handler and thus is in a different scope. By changing to No-wrap you have it in the global scope and can use it as you wanted.

edited Jun 25, 2013 at 8:19

answered Jun 25, 2013 at 8:06

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

3 Comments

nothrow Over a year ago

Also it would be nice to actually include code here, not to rely on 3rd party site.

Sergio Over a year ago

@Yossarian, what code? I changed no code, he just forgot to put "No-wrap" in jsfiddle.

Gem Over a year ago

@Sergio In my case, if i click the button i have set to display id, screenshot : snag.gy/7bzEWN.jpg code : pastiebin.com/5d35674e2fc31

eaglei22 · Accepted Answer · 2016-11-07 15:17:15Z

0

The problem for me was as simple as just not knowing Javascript well. I was trying to pass the name of the id using double quotes, when I should have been using single. And it worked fine.

This worked:

validateSelectizeDropdown('#PartCondition')

This did not:

validateSelectizeDropdown("#PartCondition")

And the function:

    function validateSelectizeDropdown(name) {
    if ($(name).val() === "") {
         //do something
    }
}

answered Nov 7, 2016 at 15:17

eaglei22

2,8501 gold badge49 silver badges62 bronze badges

Collectives™ on Stack Overflow

Pass element ID to Javascript function

5 Answers 5

Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related