Javascript dynamically assign onclick event with parameter in html

Question

I'm trying to send onclick parameters with html onclick

for (var i = 0; i < 2; i++) {
    if (i == 1) {
        document.write(" <tr class='noBorder' onclick='foo(i)' >");
    }
    if (i == 0) {
        document.write(" <tr class='noBorder' onclick='foo(i)' >");
    }
}

However, whenever I click on a row, I get back onclick = foo(2)

I've been looking around and found the same question

Javascript - Dynamically assign onclick event in the loop

I was wondering if it is possible to do this with document.write?

onclick='foo(i)' change the i values to 1 and 0 in the respective conditions — Sankara
– Sankara, Commented Apr 3, 2017 at 17:53
These are just test cases. Ultimately I will only have one line of document.write(..foo(i) — HelpinCodingpls
– HelpinCodingpls, Commented Apr 3, 2017 at 18:00

SsJVasto · Accepted Answer · 2017-04-03 17:57:46Z

0

You just need to remove ifrom the Javascript String:

for (var i = 0; i < 2; i++) {
    if (i == 1) {
        document.write(" <tr class='noBorder' onclick='foo(" + i + ")' >");
    }
    if (i == 0) {
        document.write(" <tr class='noBorder' onclick='foo(" + i + ")' >");
    }
}

2 Notes

You should inverse your use of ' and "... using '...' to delimit attributes isn't valid HTML5 (you need <div style="..."></div>, not <div style='...'></div>)
You see foo(2) everywhere because that's the last value i had. Your onclick works, but is fetching the last value that i had, instead of hardcoding the value of i when HTML was rendered.

edited Apr 3, 2017 at 17:57

answered Apr 3, 2017 at 17:53

SsJVasto

4962 silver badges13 bronze badges

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

12 Comments

Sankara Over a year ago

if i==1 then you can also say onclick='foo(1)'

Ibu Over a year ago

This is the correct way, but then what is the reason for this condition?

Sankara Over a year ago

or that if condition should be removed

HelpinCodingpls Over a year ago

These are just test cases. Ultimately I will only have one line of document.write(..foo(i)

HelpinCodingpls Over a year ago

This answer is what I am looking for. Thanks!

|

Vitorio Jorge Silva Tavares · Accepted Answer · 2017-04-03 18:02:54Z

0

document.write statements must be run before the page finishes loading

Therefore, you wouldn't want to put document.write into an onclick

If you're trying to modify a page already loaded you'll have to use div tags and use something like:

document.getElementById("name").innerHTML = "bob";

answered Apr 3, 2017 at 18:02

Vitorio Jorge Silva Tavares

213 bronze badges

Collectives™ on Stack Overflow

Javascript dynamically assign onclick event with parameter in html

2 Answers 2

12 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related