javascript - 不同按钮的切换功能

Question

我想用普通 JavaScript 制作两个不同的按钮，当一个接一个地单击时，显示不同的文本消息。

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

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

index.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>

索引.js

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

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

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

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>