JQuery onclick override div

Question

i'm trying to learn JS and I'm trying to make simple app. Now I'm having some problems.

 var animals = [ { name: "Dog", url: 'https://animal-health.co.uk/media/wysiwyg/alfie-dog.png', clicks: 0}, { name: "Cat", url: 'https://media3.giphy.com/media/o0vwzuFwCGAFO/200_s.gif', clicks: 0} ] // animals[0].name // animals[0].url // animals[0].clicks var brojac = animals[0].clicks; var clicks = animals[1].clicks; $(document).ready(function(){ $( "#pas" ).one( 'click', function(){ brojac++ var heading = $('<h1>'); heading.text(animals[0].name); $('#podaci').append(heading); var slika = $('<img src=' + animals[0].url + '>'); $('#podaci').append(slika); var brojac = $('<p class="test">' + 'Number of clicks:' + '<span id="increment">' + animals[0].clicks + '</span>' + '</p>'); $('#podaci').append(brojac); }); $('#pas').click(function(){ brojac += 1; $("#increment").text(brojac); }); $( "#macka" ).one( 'click', function(){ clicks++ var heading = $('<h1>'); heading.text(animals[1].name); $('#podaci').append(heading); var slika = $('<img src=' + animals[1].url + '>'); $('#podaci').append(slika); var clicks = $('<p class="test">' + 'Number of clicks:' + '<span id="increment">' + animals[1].clicks + '</span>' + '</p>'); $('#podaci').append(clicks); }); $('#macka').click(function(){ clicks += 1; $("#increment").text(clicks); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="container"> <span id="pas">Dog</span> <span id="macka">Cat</span> </section> <div class="container" id="podaci"> This is where it goes </div> 

When I click DOG and then CAT both of mine both of them appear on screen, but this is not what I want. When I press CAT I want it to override DOG, so only one them appear on the screen and I want counter to continue to count clicks. Also here is JSBin so you can better understand what is happening: http://jsbin.com/pebefu/edit?html,js,output

Answer 1

You don't have to keep removing and appending the elements. You can simplify your code and reuse elements using the following:

https://jsfiddle.net/tqoymucy/

Note: In many cases it may be better to have the html for both animals created from the beginning and just toggle visibility of each. The solution below will work better in cases where you may have many different animals.

 var clicks = [0 , 0]; var animals = [{ name: "Dog", url: 'https://animal-health.co.uk/media/wysiwyg/alfie-dog.png', clicks: 0 }, { name: "Cat", url: 'https://media3.giphy.com/media/o0vwzuFwCGAFO/200_s.gif', clicks: 0 }]; $(document).ready(function() { $(".animalSelector").one('click', function() { $('#activeAnimal').removeClass("hidden"); }); $('#pas').click(function() { changeAnimal(0); }); $('#macka').click(function() { changeAnimal(1); }); function changeAnimal(index) { clicks[index] += 1; $('#animalHeader').text(animals[index].name); $('#animalImage').attr("src", animals[index].url); $("#increment").text(clicks[index]); } }); 

 .animalSelector { cursor: pointer; } #macka { margin-left: 3em; cursor: pointer; } #activeAnimal.hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="container"> <span id="pas" class="animalSelector">Dog</span> <span id="macka" class="animalSelector">Cat</span> </section> <div class="container" id="podaci"> <p class="placeholder">This is where it goes</p> <div id="activeAnimal" class="hidden"> <h1 id="animalHeader"></h1> <img id="animalImage" /> <p class="clickCounter">Number of clicks: <span id="increment">0</span></p> </div> </div> 

Answer 2

You just need to empty() #podaci before you start to append stuff each time

$( "#pas" ).one( 'click', function(){
    brojac++
    var heading = $('<h1>');
    $("#podaci").empty();   /// --- THIS IS A NEW LINE
    heading.text(animals[0].name);
    $('#podaci').append(heading);

    var slika = $('<img src=' + animals[0].url + '>');
    $('#podaci').append(slika);

    var brojac = $('<p class="test">' + 'Number of clicks:' + '<span id="increment">' + animals[0].clicks + '</span>' + '</p>'); 
    $('#podaci').append(brojac);
});

This will empty your container and prepare it to be refilled with your new animal.

 var animals = [ { name: "Dog", url: 'https://animal-health.co.uk/media/wysiwyg/alfie-dog.png', clicks: 0}, { name: "Cat", url: 'https://media3.giphy.com/media/o0vwzuFwCGAFO/200_s.gif', clicks: 0} ] // animals[0].name // animals[0].url // animals[0].clicks var brojac = animals[0].clicks; var clicks = animals[1].clicks; $(document).ready(function(){ $( "#pas" ).one( 'click', function(){ brojac++ var heading = $('<h1>'); heading.text(animals[0].name); $("#podaci").empty(); $('#podaci').append(heading); var slika = $('<img src=' + animals[0].url + '>'); $('#podaci').append(slika); var brojac = $('<p class="test">' + 'Number of clicks:' + '<span id="increment">' + animals[0].clicks + '</span>' + '</p>'); $('#podaci').append(brojac); }); $('#pas').click(function(){ brojac += 1; $("#increment").text(brojac); }); $( "#macka" ).one( 'click', function(){ clicks++ var heading = $('<h1>'); heading.text(animals[1].name); $("#podaci").empty(); $('#podaci').append(heading); var slika = $('<img src=' + animals[1].url + '>'); $('#podaci').append(slika); var clicks = $('<p class="test">' + 'Number of clicks:' + '<span id="increment">' + animals[1].clicks + '</span>' + '</p>'); $('#podaci').append(clicks); }); $('#macka').click(function(){ clicks += 1; $("#increment").text(clicks); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="container"> <span id="pas">Dog</span> <span id="macka">Cat</span> </section> <div class="container" id="podaci"> This is where it goes </div> 

Answer 3

Try this , you need to remove the content in the div with id="podaci".

 var animals = [{ name: "Dog", url: 'https://animal-health.co.uk/media/wysiwyg/alfie-dog.png', clicks: 0 }, { name: "Cat", url: 'https://media3.giphy.com/media/o0vwzuFwCGAFO/200_s.gif', clicks: 0 }] // animals[0].name // animals[0].url // animals[0].clicks var brojac = animals[0].clicks; var clicks = animals[1].clicks; $(document).ready(function() { $("#pas").on('click', function() { brojac++ $('#podaci').empty(); var heading = $('<h1>'); heading.text(animals[0].name); $('#podaci').append(heading); var slika = $('<img src=' + animals[0].url + '>'); $('#podaci').append(slika); var brojac = $('<p class="test">' + 'Number of clicks:' + '<span id="increment">' + animals[0].clicks + '</span>' + '</p>'); $('#podaci').append(brojac); }); $('#pas').click(function() { brojac += 1; $("#increment").text(brojac); }); $("#macka").on('click', function() { clicks++ $('#podaci').empty(); var heading = $('<h1>'); heading.text(animals[1].name); $('#podaci').append(heading); var slika = $('<img src=' + animals[1].url + '>'); $('#podaci').append(slika); var clicks = $('<p class="test">' + 'Number of clicks:' + '<span id="increment">' + animals[1].clicks + '</span>' + '</p>'); $('#podaci').append(clicks); }); $('#macka').click(function() { clicks += 1; $("#increment").text(clicks); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="container"> <span id="pas">Dog</span> <span id="macka">Cat</span> </section> <div class="container" id="podaci"> This is where it goes </div>