Not able to call javascript function in dynamically generated HTML

Question

I am not able to call the javascript function with parameter in dynamically generated HTML code.

The same function gets called successfully when I don't pass any parameter, but with parameters the function call fails. Not sure whether it is a syntax error.

below is my code:

    <!DOCTYPE html>
    <html>
        <body>

            <p>Click the button to call a function with arguments</p>
            <button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

            <script>
            function myFunction(name,job) {
                var name="prasad";
                var str='<a href="#" onclick="javascript: fun('+name+')">link</a>';
                document.write(str);
            };

            function fun(id1) {
                alert("fun menthod "+id1);
            }
            </script>
        </body>
    </html>

If I don't pass the parameter it gets called successfully.

Usually when you cannot call JS from within HTML it means there is a JS error, open the JS console and look — Noam Rathaus
– Noam Rathaus, Commented Jan 14, 2014 at 6:44
BTW: It works on JSFiddle - jsfiddle.net/#&togetherjs=wHI6Ep7zgl — Noam Rathaus
– Noam Rathaus, Commented Jan 14, 2014 at 6:45
I tried your code and it's working... (Good practice : do not declare the same variable twice : name. It was already declared as a param. So, just affect the new value without the "var" tag.) — ylerjen
– ylerjen, Commented Jan 14, 2014 at 6:47
You should use innerHTML property instead document.write(). Check this fiddle: jsfiddle.net/NU2yF — Vin.AI
– Vin.AI, Commented Jan 14, 2014 at 7:01

Shn · Accepted Answer · 2014-01-14 07:07:00Z

1

<!DOCTYPE html>
<html>
<body>
<div id="next">
<p>Click the button to call a function with arguments</p>
<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>
</div>
<script>
function myFunction(name,job)
{
var a='"';
a=a+name+a;
var str="<a href='#' onclick='fun("+a+")'>link</a>";
document.getElementById('next').innerHTML=str;
}
function fun(id1)
{
alert("fun menthod "+id1);
}
</script>
</body>
</html>

edited Jan 14, 2014 at 7:07

answered Jan 14, 2014 at 7:00

Shn

3682 silver badges11 bronze badges

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

1 Comment

Aaliya Over a year ago

Thank you all for you prompt response

Neo Choi · Accepted Answer · 2014-01-14 06:51:28Z

1

Remove this line, because the variable name is same as the parameter name

var name="prasad";

answered Jan 14, 2014 at 6:51

Neo Choi

6061 gold badge7 silver badges17 bronze badges

Comments

Jacob · Accepted Answer · 2014-01-14 07:05:22Z

0

Here: var name="prasad"; you change the value of the 'name' parameter maybe this is your problem. Try deleting this line and see the output.

edited Jan 14, 2014 at 7:05

answered Jan 14, 2014 at 6:47

Jacob

4,07124 gold badges92 silver badges151 bronze badges

Comments

Paul Ackley · Accepted Answer · 2016-11-21 18:22:25Z

0

change name to:

var name="'prasad'";

I'm seeing syntax error in JS Console otherwise.

answered Nov 21, 2016 at 18:22

Paul Ackley

6310 bronze badges

Collectives™ on Stack Overflow

Not able to call javascript function in dynamically generated HTML

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related