在運行另一個功能后殺死一個功能

Question

我正在創建一個不喜歡/喜歡系統，當您單擊圖像輸入后，當您喜歡或不喜歡屏幕上的某些東西時，它將在其中顯示。

我的問題是，例如：

當我單擊豎起大拇指時， LIKED出現類似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()"> 

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()"> 

Answer 2

改為顯示和隱藏-請注意，如果在表單內，則type =“ image”是一個提交按鈕：

版本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)" /> 

版本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)" /> 

Answer 3

 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)">