javascript - 在另一个函数运行后杀死一个函数

Question

我正在制作一个不喜欢/喜欢的系统，当您单击图像输入后，它会在您喜欢或不喜欢屏幕上的某些内容时显示。

我的问题是，例如：

当我单击竖起大拇指时，LIKED会出现一条消息，但随后我单击竖起大拇指并DISLIKED出现在LIKED.

我希望它是，如果我点击拇指向下然后LIKED消息消失并DISLIKED出现。

function ai() {
  document.getElementById("liked").innerHTML = "LIKED";
}

function aii() {
  document.getElementById("disliked").innerHTML = "DISLIKED";
}

<h1 id="liked"></h1>
<h1 id="disliked"></h1>
<input type="image" src="tu.png" class="tu" onclick="ai()">
<input type="image" src="td.png" class="td" onclick="aii()">

标签： javascript

Answer 1

您只能创建 1 个元素并按照以下方式进行操作

function ai() {
  document.getElementById("message").innerHTML = "LIKED";
}

function aii() {
  document.getElementById("message").innerHTML = "DISLIKED";
}

<h1 id="message"></h1>
<input type="image" src="tu.png" class="tu" onclick="ai()">
<input type="image" src="td.png" class="td" onclick="aii()">

或者你可以像下面这样改进你的代码

function ai() {
  document.getElementById("liked").innerHTML = "LIKED";
  document.getElementById("disliked").innerHTML = "";
}

function aii() {
  document.getElementById("disliked").innerHTML = "DISLIKED";
  document.getElementById("liked").innerHTML = "";
}

<h1 id="liked"></h1>
<h1 id="disliked"></h1>
<input type="image" src="tu.png" class="tu" onclick="ai()">
<input type="image" src="td.png" class="td" onclick="aii()">