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, Apr 03 '17 at 17:53
These are just test cases. Ultimately I will only have one line of document.write(..foo(i) — HelpinCodingpls, Apr 03 '17 at 18:00

SsJVasto · Accepted Answer · 2017-04-03T17:57:46.870

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 03 '17 at 17:57

answered Apr 03 '17 at 17:53

SsJVasto

486
2
13

if i==1 then you can also say onclick='foo(1)' – Sankara Apr 03 '17 at 17:54
This is the correct way, but then what is the reason for this condition? – Ibu Apr 03 '17 at 17:57
or that if condition should be removed – Sankara Apr 03 '17 at 17:57
These are just test cases. Ultimately I will only have one line of document.write(..foo(i) – HelpinCodingpls Apr 03 '17 at 17:58
This answer is what I am looking for. Thanks! – HelpinCodingpls Apr 03 '17 at 18:01
Well, I don't know why the if() clause is there, personally I would have used a switch(), but I didn't want to give a programming lesson here – SsJVasto Apr 03 '17 at 18:01
@HelpinCodingpls Something like `for (var i = 0; i < 2; i++) { document.write(""); }` is the final "desired" code? – Mark Schultheiss Apr 03 '17 at 18:04
This is just a test case. In my real code, I will have a dynamic array of objects that I will write. – HelpinCodingpls Apr 03 '17 at 18:04
@MarkSchultheiss Yes – HelpinCodingpls Apr 03 '17 at 18:05
@HelpinCodingpls You should mark your Question as "Answered" – SsJVasto Apr 03 '17 at 18:06
OK, so the conditionals MAY be desired, just with the/some additional objects base. @SsJVasto, Please refrain from begging for upvotes in this manner. – Mark Schultheiss Apr 03 '17 at 18:08
@MarkSchultheiss No begging occurred, I didn't even ask to upvote my answer, I just said it should be closed (marked as answered). – SsJVasto Apr 03 '17 at 18:12

score 0 · Answer 2 · answered Apr 03 '17 at 18:02

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";

Javascript dynamically assign onclick event with parameter in html

2 Answers2