执行 innerHTML 后按钮上的文本不会改变

Question

使用 JQuery 时，如果您使用 javascript 更改它们的值，某些 ui 元素（例如下拉框或按钮）将不会自动更新它们的 ui。尽管该值已正确更新，但在屏幕上看起来没有任何变化。为了解决这个问题，Jquery 需要在更改值后使用“刷新”方法。在此页面上，您可以找到信息和语法：http://jquerymobile.com/test/docs/forms/docs-forms.html（向下滚动到“刷新表单元素）

我遇到了一些 html 元素上的文本没有正确更新的问题，尤其是按钮和列表框（选择/选项）。它应该自动执行此操作，但有时文本只是坚持其先前的值。 text 或 innerHTML 的值是正确的，只是不可见。

这是按钮的问题。我使用 Javascript 来获取 innerHTML 并对其进行更改。

HTML 标记：

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

Javascript：

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

通过使用警报消息，我可以看到更改前后的值。这些警告信息是正确的：点击后的值确实是anArray[0]的值，但是我浏览器中按钮的文本没有改变，它停留在“A”上。 这个按钮令人沮丧的是，有时文本确实会发生变化，但只是在我第一次更改 html 时（这发生在第一次向用户显示按钮之前）。之后对该函数的其他调用不再更改文本。然而，innerHTML 发生了变化，正如警报消息所证实的那样。所以一切都在“工作”，但用户不会知道他们实际点击的是什么，因为按钮的文本是不可见的。

我通过使用 作为按钮的 innerHTML 并将 span 的 innerHTML 更改为数组中的值来解决此问题。这有效：每次更改 innerHTML 时，它都会在屏幕上可见。虽然我有一个解决方案，但这只是一种解决方法，我很好奇是什么原因造成的？

列表框也有类似的问题。默认值为“每天”。 （见下面的完整代码）。

document.getElementById("interval_list").selectedIndex

和

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

同样，在函数内部，值始终是正确的，但即使函数显示 selectedIndex 为 3（应该是“从不”），下拉菜单的文本也会每天显示。我无法通过在任何地方添加 来解决此问题，所以我被卡住了。

一些备注：

• html中没有重复的id（用find检查）
• 页脚按钮没有这个问题，段落、跨度或页眉也没有。
• 我尝试在 fiddle 和 wc3 的 tryit 编辑器中复制类似的代码：它在那里工作。所以它一定是简单功能之外的东西把它弄坏了？
• 检查浏览器兼容性：这不是问题（我不使用 即）。

列表框完整代码：

        <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=

注意您的案例 - HTML 应该大写。

Answer 2

评论多于回答。使用以下代码：

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

按钮的innerHTML在FF和IE 8中发生了变化，你用的是什么浏览器？

对于您的选择问题也是如此，以下适用于 IE 8 和 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>