Javascript 语言在同一按钮上切换

Question

我有这部分代码:

JS:

function changeText() {
    document.getElementById('lang').innerHTML = 'default language';
}

HTML:

<p id='lang'> 
    some other language 
    <input type='text' style="font-size: 12px;" onclick='changeText()' value='click me'/>
</p>

“单击我”按钮可以工作，并将“默认语言”切换为“其他语言”，但在初次单击后消失。我希望能够在同一按钮上来回切换语言，但我只能添加另一个按钮。帮忙？

Answer 1

问题在于您替换了整个内部 HTML，即 p 标记的整个内容包括按钮。

您需要将要替换的内容放入子元素中，例如 span:

<p> 
   <span id='lang'>some other language</span> 
   <input type='text' style="font-size: 12px;" onclick='changeText()' value='click me'/>
</p>

您现在可以安全地替换该范围的内容，因为其中没有其他需要的 HTML 标记。

您可以通过使用额外的 JavaScript 来实现相同的目的，但更改标记可能是最简单、最清晰的解决方案。

提示:将点击处理程序放入 onclick 属性中被认为是不好的编码风格。 (Why is using onClick() in HTML a bad practice?)