CODEWITHSUNDEEP
javascripthtml
user2406751
user2406751

Reputation: 1

basic JS - innerHTML only working inline

I'm new to JavaScript and I've searched this site and other for hours for a solution, but can't get this to work. I'm probably making a basic mistake here.

If I call innerHTML inline like this it works perfectly:

<select id="myselect" onchange="this.innerHTML = '<option value="1">1</option><option value="100">100</option>'"></select>

But if I try to call it from an external JavaScript file or HEAD it doesn't work:

<script type="text/javascript">
function addSomeOptions(obj) {
    obj.innerHTML = '<option value="1">1</option><option value="100">100</option>'
}
</script>

<select id="myselect" onchange="addSomeOptions(this)"></select>

I really would like to add the javascript in an external file rather than inline, since there may be hundreds of options. I also realise there are JS functions for adding Option tags, but because of the way the options are generated, I think it is preferable in this case to use the innerHTML function.

Upvotes: 0

Views: 1283

Answers (3)

Prashant Sachaniya
Prashant Sachaniya

Reputation: 118

You can try following code in your html page,

    <script type="text/javascript">
    function addSomeOptions(obj) {
        obj.innerHTML = '<option value="1">1</option><option value="100">100</option>'
    }
    </script>
    <select id="myselect" onchange="addSomeOptions(this)">
          <option>TestFirstValue</option>
          <option>TestSecondValue</option>
    </select>

Upvotes: 2

BBog
BBog

Reputation: 3650

Your problem is most likely appears because the object you are trying to access in head is not yet loaded. Try to wrap your js calls inside onload, like this:

window.onload = function () {
   function addSomeOptions(obj) {
        obj.innerHTML = '<option value="1">1</option><option value="100">100</option>'
    }
}

If you try to access an object before it was created, it won't work. You need to either do it after the page loads (see the code above) or, if you like script tags, place the code inside a script tag after the html declaration of your div / input / etc.

Edit: as Frits pointed out, you are doing the call on the onchange event, so it's ok. However, looking at your code, you need to have some options inside the select tag in order to be able to trigger it: The code below works just fine for me:

<html>
<head>

</head>
<body>
<script type="text/javascript">
function addSomeOptions(obj) {
    obj.innerHTML = '<option value="1">1</option><option value="100">100</option>'
}
</script>

<select id="myselect" onchange="addSomeOptions(this)">
    <option value="1">2</option><option value="100">200</option>
</select>
</body>
</html>

Upvotes: 0

Halcyon
Halcyon

Reputation: 57693

innerHTML is a really crude tool to add dynamic HTML.

The DOM API offers a much more reliable interface for dynamically modifying HTML.

Your example:

function addSomeOptions(obj) {
    var option = document.createElement("option");
    option.setAttribute("value", 1);
    option.appendChild(document.createTextNode("1"));
    obj.appendChild(option);
    /* repeat for all options */
}

Now, as you can see, this is really clunky (but reliable). There exist frameworks that try to do a better job. It's worth taking a look at those.

Upvotes: 0

Related Questions