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>

＆＃34;点击我＆＃34;按钮工作，并切换＆＃34;默认语言＆＃34;到＆＃34;其他语言＆＃34;，但在初次点击后消失。我希望能够在同一个按钮上来回切换语言，但我只能添加另一个按钮。帮忙？

Answer 1

问题是您要替换整个内部HTML，(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})[\/\w \.-]*(jpg|png|gif|jpeg|tif|tiff)标记的整个内容，包括按钮。

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

您现在可以安全地替换span的内容，因为那里没有其他所需的HTML标记。

您可以通过使用其他JavaScript来实现相同的目标，但更改标记可能是最简单，最明确的解决方案。

提示：将点击处理程序放入<p> <span id='lang'>some other language</span> <input type='text' style="font-size: 12px;" onclick='changeText()' value='click me'/> </p>属性被视为错误的编码风格。（Why is using onClick() in HTML a bad practice?）

Answer 2

它会消失，因为您的输入位于<p></p>。您需要从p获取输入。

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

另一件事：为什么您使用输入类型文本来执行按钮的工作？

Answer 3

由于<input>位于<p>内，因此当您使用新值替换innerHTML时，它也会被覆盖。

some other language中的

<p>仍然是一个节点，因此您可以使用p.childNodes[0]进行提取，然后将其节点值更改为新节点。其中，现在不会影响输入。

如果你想切换文字，你必须包括在语言之间切换的逻辑。

＆＃13;

function changeText()
    {
     var p  = document.getElementById('lang');
     var langList = ['some other language', 'default language'];
     // Get current index
     var idx = p.dataset.lang;
     idx = idx == null ? 0 : parseInt(idx, 10);
      
     // Switch to next language
     idx = (idx + 1) % langList.length;
     p.dataset.lang = idx;
      
     p.childNodes[0].nodeValue = langList[idx];
    }

＆＃13;

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

＆＃13;

Javascript语言在同一个按钮上切换

3 个答案: