0

So I gave seen the same error message presented many times on this site but the problem is always the script loading before the html, but in my case the script is linked at the end of the html. But I keep getting this error message in the console "Cannot set property 'innerHTML' of null" and have been trouble shooting for a while and was unable to locate the issue.

HTML

<select id="selectCon" onchange="contNum()">
            <option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option>
        </select>

    <div id="allWrap1"></div>
    <div id="allWrap2"></div>
    <div id="allWrap3"></div>
    <div id="allWrap4"></div>
    <div id="allWrap5"></div>

<script src="script.js"></script>

JavaScript

var auth = '<select class="con'+ '' +'">' + '<option>Author</option>' + '<option>Editor</option>' + '<option>Compiler</option>' + '<option>Translator</option>' + '</select>' + '<br/>' + '<div class="authWrap">' + '<input id="author1F" class="infoMed" placeholder="First">' + '<input id="author1M" class="infoShort" placeholder="M.I.">' + '<input id="author1L" class="infoMed" placeholder="Last">' + '</div>' + '</div>'

function contNum() {
    var contNum = document.getElementById("selectCon").value;
    contNumGlobal = contNum;
    var c;
    for (c = 0; c < contNum; c++){
        var tc = c.toString;
        var tid = "allWrap" + tc;
        document.getElementById(tid).innerHTML = auth;
    }
}

The problem is not with the long variable as I have tried to just make the inner HTML a string and I still got the same error message. I also messed around with changing the 'tc' and 'tid' variable types (to string and float and num) but wasn't able to get it to work. If you could provide any feedback it would be very helpful, and thank you for taking your time to read this, it means a lot.

Filtered
  • 65
  • 1
  • 7
  • 2
    Most obviously, `allWrap0` doesn't exist so your loop fails instantly. – Niet the Dark Absol Feb 15 '20 at 16:09
  • 2
    `c` starts at `0`. `var tid = "allWrap" + tc;` would create `"allWrap0"` (other than a second problem I'll describe later). There is no `id="allWrap0"` element in your quoted HTML, they start at `1`. Also note that `c.toString` just refers to the function `toString`, it doesn't **call** that function. You don't have an element called `allWrapfunction toString() { [native code]; }`, either. :-) When running into issues like this, use the debugger built into your IDE or browser. Set a breakpoint on the line giving you trouble, and hover the mouse over variables, etc., to see their contents. – T.J. Crowder Feb 15 '20 at 16:09
  • Wow I’m so dumb, how did I not catch that, thank you very much I will fix as soon as I can – Filtered Feb 15 '20 at 18:02

0 Answers0