javascript - 执行 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(用于查找检查)
• 我对页脚中的按钮没有这个问题，也没有段落、跨度或标题中的按钮。
• 我试过在 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 应该大写。