CODEWITHSUNDEEP
javascript
ZRDieuG
ZRDieuG

Reputation: 19

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.

I would like it to be that if I click on the thumbs down then the LIKED message disappears and the DISLIKED appears.

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

Upvotes: 0

Views: 56

Answers (3)

mplungjan
mplungjan

Reputation: 178421

Show and hide instead - Do be aware that type="image" is a submit button if inside a form:

Version 1: only one 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:

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

Upvotes: 1

Hardik Prajapati
Hardik Prajapati

Reputation: 177

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

Upvotes: 0

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

You can create only 1 element and do it like following

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

Upvotes: 1

Related Questions