0

I have an html page dynamically generated by javascript with the onLoad event. This is the javascript:

function populateTable(q,a1,a2,a3,a4) {
    var i;
    for (i=0;i<10;i++) {
        table = document.createElement("table");
        table.appendChild(createQuestion(q,i));
        for (var j=0;j<4;j++) {
            var answer= eval("a" + (j+1));
            table.appendChild(createAnswers(j,answer,i));
        }
        var tabform= document.getElementById("tablesform");
        tabform.appendChild(table);
    }
}

function createQuestion(quest,i) {
    var row = document.createElement("tr");
    var tabd = document.createElement("td");
    tabd.setAttribute("class","question");
    var qinput=document.createElement("input");
    qinput.setAttribute("type","text");
    qinput.setAttribute("name","q" + (i+1));
    qinput.setAttribute("value",quest[i]);
    qinput.setAttribute("readonly","readonly");
    qinput.setAttribute("size","50"); 
    row.appendChild(qinput);
    var tabd1 = document.createElement("td");
    var rdiv = document.createElement("div");
    rdiv.setAttribute("id","result" + (i+1));
    tabd1.appendChild(rdiv);
    row.appendChild(tabd1);

    return row;
}

in FF it works fine, it makes 10 neat tables, each with the question inside the text input on the first row, with all of the text input fields of the same size (50), etc etc..

on IE8 the text field remains empty, and moreover its size is not fixed! The strange thing is that if I go look at the html that was generated i see:

<FORM id=tablesform method=post action=processquiz.php>
    <INPUT value=" - Correct The Test - " type=submit>
    <INPUT onclick="window.location='logout.php'" value=" - Log Out -  " type=button> 
    <TABLE>
        <TR>
            <INPUT value="What browser has the most DHTML extentions?" readOnly size=50 type=text name=q1>
            <TD><DIV id=result1></DIV></TD>
        </TR>

which is perfectly fine! What could be the problem?

EDIT: document is html 4.01 strict

UB-
  • 123
  • 3
  • 12
  • 3
    You should avoid `eval()`! – Derek Henderson Jul 24 '13 at 10:49
  • 1
    What is your doctype? – Derek Henderson Jul 24 '13 at 10:53
  • DOCTYPE is a strong contender for being the cause of problems like this. But in any case, you should use CSS to define your layout, not those old-style deprecated attributes. – Spudley Jul 24 '13 at 11:40
  • so like use input { width:50px; } ? – UB- Jul 24 '13 at 13:08
  • @DerekHenderson did not know eval was deprecated. what could I use in my case instead? Don't see other ways, the variable has to be dynamic.. – UB- Jul 24 '13 at 13:25
  • @AlexButera `eval()` is not deprecated, but it's a bad idea to use. See http://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea – rink.attendant.6 Jul 24 '13 at 13:32
  • `eval` isn't deprecated, it's just poor practice. In this case, better practice would be to pass the `a1`,`a2`, etc vars into the function as an array or object, then you could refer to `a[1]` etc without needing any `eval` calls. – Spudley Jul 24 '13 at 13:32
  • 1
    Re CSS: yes, exactly like that. The `size` attribute is deprecated; CSS like `{width:50px;}` is the modern preferred alternative. Additionally, be aware that using tables for layout as you're doing is also deprecated. Again, modern CSS techniques are considered better practice. (not to mention the fact that your table code is actually invalid HTML anyway, since the input is not inside a `` element; that's probably the real reason the `size` attribute is playing up) – Spudley Jul 24 '13 at 13:35
  • @AlexButera, nobody said `.eval()` is deprecated, just that you shouldn't use it. In your case, you don't need it because you can just step through `arguments`. Change `for (var j=0;j<4;j++) {` to `for (var j = 1; j < arguments.length; j += 1) {`. Then replace the next two lines with `var answer = arguments[j];` and `table.appendChild(createAnswers(j - 1, answer, i));`. Moral of the story is there is always a better way than to use `.eval()`. – Derek Henderson Jul 24 '13 at 13:42
  • I have tried your code with an HTML 4.0 strict doctype, and I cannot replicate this bug at all. Sry. My only suggestion is that perhaps something else on the page that you haven't shown us, perhaps an IE conditional stylesheet, is causing this problem. – Derek Henderson Jul 25 '13 at 08:56

0 Answers0