[英]Kill a function after another function has been run
I am making a dislike/like system where it displays when you liked or disliked something on the screen after you clicked on the image input. 我正在创建一个不喜欢/喜欢系统,当您单击图像输入后,当您喜欢或不喜欢屏幕上的某些东西时,它将在其中显示。
My problem is, for example: 我的问题是,例如:
When I click on thumbs up a LIKED
message appears like it should, but then I click the thumbs downs and the DISLIKED
appears under the LIKED
. 当我单击竖起大拇指时, LIKED
出现类似LIKED
消息,但是随后我单击竖起大拇指,并且DISLIKED
出现在LIKED
。
I would like it to be that if I click on the thumbs down then the LIKED
message disappears and the DISLIKED
appears. 我希望这样,如果我单击大拇指,则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()">
You can create only 1 element and do it like following 您只能创建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()">
Or you can improve your code like below 或者您可以像下面那样改进代码
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()">
Show and hide instead - Do be aware that type="image" is a submit button if inside a form: 改为显示和隐藏-请注意,如果在表单内,则type =“ image”是一个提交按钮:
Version 1: only one H1 版本1:只有一个H1
function ai(img) { console.log(img.className) document.getElementById("liked").innerHTML = img.className == "tu" ? "LIKED" : "DISLIKED"; document.getElementById("liked").style.display = "block"; }
.like { display: none }
<h1 class="like" id="liked"></h1> <img src="tu.png" class="tu" onclick="ai(this)" /> <img src="tu.png" class="td" onclick="ai(this)" />
Version 2 - both on page: 版本2-均在页面上:
function ai(img) { console.log(img.className) document.getElementById(img.className == "tu" ? "liked" : "disliked").style.display = "block"; document.getElementById(img.className == "tu" ? "disliked" : "liked").style.display = "none"; }
.like { display: none }
<h1 class="like" id="liked">LIKED</h1> <h1 class="like" id="disliked">DISLIKED</h1> <img src="tu.png" class="tu" onclick="ai(this)" /> <img src="tu.png" class="td" onclick="ai(this)" />
function ai(temp) { if (temp == "1") { document.getElementById("Result").innerHTML = "LIKED"; } else { document.getElementById("Result").innerHTML = "DISLIKED"; } }
<h1 id="Result"></h1> <input type="image" src="tu.png" class="tu" onclick="ai(1)"> <input type="image" src="td.png" class="td" onclick="ai(0)">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.