Text on button doesn't change after doing innerHTML

Question

When using JQuery, some ui elements such as dropdownboxes or buttons will NOT UPDATE their ui automatically if you change their value with javascript. Although the value is correctly updated, on screen it looks like nothing changed. To fix this, Jquery requires the use of a "refresh" method after changing the value. On this page you can find the info and syntax: http://jquerymobile.com/test/docs/forms/docs-forms.html (scroll down to "refreshing form elements)

I have problems with the text not updating correctly on some html elements, especially buttons and list boxes (select/option). It's supposed to do so automatically, but sometimes the text just stick to its previous value. The value of the text or innerHTML is correct though, it's just not visible.

Here is the problem with the button.I use Javascript to get the innerHTML and change it.

HTML markup:

<button id="btn" onclick"simple_function">A</button>

Javascript:

function simple_function()
{
    var anArray = aFunctionThatReturnAnArray();
    document.getElementById("btn").innerHTML = anArray[0];
}

By using alert messages I can see the values before and after a change. These alert messages are correct: the value after clicking is indeed the value of anArray[0], but the text of the button in my browser does not change, it stays on "A". What's frustrating about this button is that sometimes the text does change, but only the first time I change the html (this happens right before the button is displayed the first time to the user). Additional calls of the function afterwards don't change the text anymore. However, the innerHTML IS changed, as verified by an alert message. So everything keeps 'working' but the users will not know what they're actually clicking on because the text of the button isn't visible changed.

I fixed this by using a < span > as the innerHTML for the button, and changing the innerHTML of the span to the value in the array. This works: everytime the innerHTML is changed, it is visible on the screen. Although I have a solution, it's only a work around and I'm curious as to what could cause this?

I have a similar problem with a list box. The default value is "daily". (See full code below).

document.getElementById("interval_list").selectedIndex

and

document.getElementById("interval_list").selectedIndex = 3;

Again, inside the functions the values are always correct, but the text of dropdown stays on daily even if the function says the selectedIndex is 3 (should be "never"). I cannot fix this by adding < span > anywhere, so here I'm stuck.

Some remarks:

• There are no duplicate id's in the html (used find to check)
• I don't have this problem with buttons in the footer and also never with paragraphs, spans or headers.
• I've tried copying similar code in fiddle and wc3's tryit editor: it works there. So it must be something outside of the simple functions that bugs it out?
• Checking for browsercompatability: that's not an issue (I don't use IE).

Full code of list box:

        <div class="ui-grid-a">

            <div class="ui-block-a">

                <p style="padding-right: 1em; padding-top: 0.4em;" align="right">AUTO REMIND</p>
                <p style="padding-right: 1em; padding-top: 1em;" align="right">INTERVAL</p>

            </div>

            <div class="ui-block-b">

                <div id="auto_remind_radio_buttons" data-role="controlgroup" data-type="horizontal">

                    <input type="radio" onclick="document.getElementById('interval_list').selectedIndex = 0;" name="auto_remind_button" id="auto_remind_on" value="male"/>
                    <label for="auto_remind_on"><img src="images/correct.png" alt="NO" width="26" height="21"></label>
                    <input type="radio" onclick="document.getElementById('interval_list').selectedIndex = 3;" name="auto_remind_button" id="auto_remind_off" value="female"/>
                    <label for="auto_remind_off"><img src="images/wrong.png" alt="NO" width="26" height="21"></label>

                </div>

                <select id="interval_list" name="Single-line ListBox example">

                    <option id="1" value="1">daily</option>
                    <option id="2" value="2">weekly</option>
                    <option id="3" value="4">monthly</option>
                    <option id="4" value="5">never</option>

                </select>

            </div>

        </div>

Answer 1

document.getElementById("btn").innerHTML=

Watch your case- HTML should be in caps.

Answer 2

More comment than answer. Using the following code:

<button id="b0">b0</button>
<button id="b1" onclick="
  document.getElementById('b0').innerHTML = 'foo';
">click me</button>

the innerHTML of the button changes in FF and IE 8, what browser are you using?

Same for your issue with the select, the following works in IE 8 and FF:

<select id="sel0">
  <option>Sunday
  <option>Monday
  <option>Tuesday
  <option>Wednesday
</select>

<button onclick="
  document.getElementById('sel0').selectedIndex = 1;
">Select Monday</button>

<button onclick="
  document.getElementById('sel0').selectedIndex = 3;
">Select Wednesday</button>