javascript - 不同按钮的切换功能

Question

我想在 vanilla JavaScript 中制作两个不同的按钮，当一个接一个地单击时，会显示不同的文本消息。

在重组下面的代码方面有什么建议吗？谢谢。

我可以找到一个按钮的切换功能，但不能找到不同的按钮。

索引.html

<button onclick="revealMessageUk()"><li><img class="flag-pictures" src="images/uk.svg" id="1"/></li></button>

<button onclick="revealMessageSpain()"><li><img class="flag-pictures" src="images/spain.svg" id="3"/></li></button>


<p id="hiddenMessageUk" style="display:none">Hello!</p>

<p id="hiddenMessageSpain" style="display:none">¡Hola!</p>

index.js

function revealMessageUk() {
  document.getElementById('hiddenMessageUk').style.display = 'block';
}

function revealMessageSpain() {
  document.getElementById('hiddenMessageSpain').style.display = 'block';
}

我不仅想像以后那样显示，而且还想为下面的两种外语提供一种切换功能（隐藏/显示或添加/删除功能）。

标签： javascript

Answer 1

尝试

function revealMessage(msg) {
  hiddenMessage.style.display='block';
  hiddenMessage.innerText=msg;
}

<button onclick="revealMessage('Hello!')"><li><img class="flag-pictures" src="images/uk.svg" id="1" alt='UK'/></li></button>

<button onclick="revealMessage('¡Hola!')"><li><img class="flag-pictures" src="images/spain.svg" id="3" alt='ES'/></li></button>

<p id="hiddenMessage" style="display:none"></p>