0

I have a function that is called button and it appends m table using a loop. I have modified the loop so that it assigns an ID to each <td> it makes. However, it does not seem to be working right.

Here it is in action, follow the use case below to test it: http://jsfiddle.net/JEAkX/19/

Here is a simple use case I use to test it:

  1. Change the letter in a cell
  2. Press "More"
  3. Change the letter in one of the new cells

It should function the same as the original cells if the ID was getting assigned properly.

The counter is: var n = 13;

and it is inserted into the appended cell as such: 

cell.innerHTML = "<input type='text' id='r"+ (n) +"' size='1' onChange='getPos('r"+ (n++) +"'), modifyCells('alphabetTable')' value='" + subset[i++] + "' />"`

This is the DOM source I am getting:

<td><input id="r13" size="1" onchange="getPos(" r14="" ),="" modifycells(="" alphabettable="" )="" value="q" type="text"></td>
<td><input id="r14" size="1" onchange="getPos(" r15="" ),="" modifycells(="" alphabettable="" )="" value="r" type="text"></td>

I suspect it has to do with cramming everything into 1 line like @zzzzBov said but I dont know how else to do it.

Pointy
  • 405,095
  • 59
  • 585
  • 614
tehaaron
  • 2,250
  • 10
  • 31
  • 54
  • 3
    I've said this many times before: HTML is your Model, CSS is your View, JavaScript is your Controller. Keep them separated. HTML belongs in .html, CSS belongs in .css, and JS belongs in .js. If your input needs an onchange event, add it via javascript, not via HTML, then expand on the code so that it's readable and debuggable. Don't try to jam everything on one line in HTML. It doesn't work well that way. – zzzzBov Mar 10 '11 at 04:23
  • Are you intending to n++ twice? – Brad Christie Mar 10 '11 at 04:24
  • I'm not really clear on what you are trying to do. What are you expecting to happen exactly? Just a wild guess but are you sure you want to be using the ++ operator multiple times in one line? – Corey Sunwold Mar 10 '11 at 04:24
  • @zzzzBov If I knew a better way I would do it, however I started on javascript Monday night and I am trying to learn via a document a friend gave me. – tehaaron Mar 10 '11 at 04:35
  • @Brad No I wasn't however when I changed it to just `n` it still wasn't behaving like I had anticipated. – tehaaron Mar 10 '11 at 04:37
  • I updated with the DOM Source – tehaaron Mar 10 '11 at 04:40

2 Answers2

3

Besides the n++, there's a quoting issue in your HTML. There are nested single quotes in the onchange attribute, like so:

<input type='text' id='r19' size='1' onChange='getPos('r20'), modifyCells('alphabetTable')' value='p' />

Quick fix for the syntax is to use escaped double quotes, so you can get going: cell.innerHTML = "<input type='text' id='r"+ n +"' size='1' onChange='getPos(\"r"+ (n++) +"\"), modifyCells(\"alphabetTable\")' value='" + subset[i++] + "' />"

Athena
  • 3,130
  • 1
  • 19
  • 17
  • Im confused...I dont see escaped double quotes? – tehaaron Mar 10 '11 at 04:45
  • Oops sorry pasted the wrong thing from my paste buffer. Gimme a moment. – Athena Mar 10 '11 at 04:47
  • Also I changed the second `n++` to just `n` but it is still adding 1 to it... if `id="r19"` then getPos should be `getPos('r19')` – tehaaron Mar 10 '11 at 04:48
  • The n++ needs to be last in the loop, so it should be the first n++ that is modified, rather than the second. Even better would be to have the n++ outside the line, because inside there it just gets lost in the general line noise. – Athena Mar 10 '11 at 04:52
  • Thank you! I took `n++` out and put it above, so the line only has `n` thanks a ton! – tehaaron Mar 10 '11 at 05:00
1

Separation of HTML/CSS/JS notwithstanding.... You need 3 levels of quotes. Also, the comma in the onclick event needs to be a semicolon.

Perhaps:

cell.innerHTML = "<input type='text' id='r" + n + "' size='1'
  onChange='getPos(\"r" + (n++) + "\"); modifyCells(\"alphabetTable\")'
  value='" + subset[i++] + "' />"
John Pick
  • 5,562
  • 31
  • 31