How to add unique div on click button

Question

Guys help when i choose for example lenovo and click button it creates okey,but then i choose acer and click again to the button it creates again lenovo then acer (for example : first step (Acer) second step (Acer Acer Lenovo) how to make it unique?

$(document).ready(function () {
    $('.filter-values').click(function () { 
        let name= $(this).parent().text();

        $('.button-filter').click( function(){

            if($(this).parent().find('input.filter-values').prop("checked") == true){
                            
                $('.top-head').append(`<div class = '${name}'>${name}</div>`);
            } 
            else{
                $('.top-head').find(`div.${name}`).remove();
            }

            return false;
        } )

        
    });
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 100%; background-color: bisque;"  class="top-head">

    </div>
   <form>
       <ul>
           <li>Lenovo<input class="filter-values" type="checkbox"></li>
           <li>HP<input class="filter-values" type="checkbox"></li>
           <li>Mac<input class="filter-values" type="checkbox"></li>
           <li>Sony<input class="filter-values" type="checkbox"></li>
           <li>LG<input class="filter-values" type="checkbox"></li>
       </ul>
       <button class="button-filter">button</button>
 
   </form> 

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="js.js"></script>

</body>
</html>

Ian Swift · Accepted Answer · 2020-06-26 05:53:06Z

it looks like you should be using radio buttons instead of checkboxes
<input type="radio">
please include comments in your code, they make it much easier to read
I wouldn't even use jquery, I would make it look something like this:

function drawResult(){
  if(document.getElementById('lenovo').checked){
    document.getElementById('top-head').innerHTML = 'Lenovo';
    //this unchecks everything else
    document.getElementById('hp').checked = false;
    document.getElementById('mac').checked = false;
    document.getElementById('sony').checked = false;
    document.getElementById('lg').checked = false;
  }
  if(document.getElementById('hp').checked){
    document.getElementById('top-head').innerHTML = 'HP';
    document.getElementById('lenovo').checked = false;
    document.getElementById('mac').checked = false;
    document.getElementById('sony').checked = false;
    document.getElementById('lg').checked = false;
  }
  if(document.getElementById('mac').checked){
    document.getElementById('top-head').innerHTML = 'Mac';
    document.getElementById('hp').checked = false;
    document.getElementById('lenovo').checked = false;
    document.getElementById('sony').checked = false;
    document.getElementById('lg').checked = false;
  }
  if(document.getElementById('sony').checked){
    document.getElementById('top-head').innerHTML = 'Sony';
    document.getElementById('hp').checked = false;
    document.getElementById('mac').checked = false;
    document.getElementById('lenovo').checked = false;
    document.getElementById('lg').checked = false;
  }
  if(document.getElementById('lg').checked){
    document.getElementById('top-head').innerHTML = 'LG';
    document.getElementById('hp').checked = false;
    document.getElementById('mac').checked = false;
    document.getElementById('sony').checked = false;
    document.getElementById('lenovo').checked = false;
  }
  
  return false;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 100%; background-color: bisque;"  id="top-head">

    </div>
   <form onsubmit=" return drawResult()">
       <ul>
           <li>Lenovo<input id="lenovo" type="radio"></li>
           <li>HP<input id="hp" type="radio"></li>
           <li>Mac<input id="mac" type="radio"></li>
           <li>Sony<input id="sony" type="radio"></li>
           <li>LG<input id="lg" type="radio"></li>
       </ul>
<input type="submit"> 
   </form> 

   
   <script src="js.js"></script>

</body>
</html>

My code could be cleaner.
Just a tip for asking questions, don't start it with 'guys help'. Another thing is that when you type your question, use <br> to get new lines. It looks like there are spots where you put line breaks, and they didn't show up.

Thanks for your attention and help,I think i did not explain well, i need filter like in online shop,so for me it must be checkbox and choose not only one item

Todor Markov · Accepted Answer · 2020-06-26 05:48:31Z

0

Change type to be 'type=radio'

answered Jun 26, 2020 at 5:48

Todor Markov

5175 silver badges12 bronze badges

Comments

Lovesh Dongre · Accepted Answer · 2020-06-26 07:10:11Z

0

For HTML, you need only two changes.

add a value attribute to each checkbox
add type attribute with value button (To prevent submission of form and reload)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 100%; background-color: bisque;"  class="top-head">

    </div>
   <form>
       <ul>
           <li>Lenovo<input class="filter-values" type="checkbox" value="Lenovo"></li>
           <li>HP<input class="filter-values" type="checkbox" value="HP"></li>
           <li>Mac<input class="filter-values" type="checkbox" value="Mac"></li>
           <li>Sony<input class="filter-values" type="checkbox" value="Sony"></li>
           <li>LG<input class="filter-values" type="checkbox" value="LG"></li>
       </ul>
       <button class="button-filter" type='button'>button</button>
 
   </form> 

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="js.js"></script>

</body>
</html>

For your javascript, we are going to delete all elements inside .top-head and then repopulate our new element.

$(document).ready(function () {
   
   $('.button-filter').click( function(){
      $('.top-head').empty()

      $('input.filter-values[type=checkbox]:checked').each(function () {
         $('.top-head').append(`<div class = '${this.value}'>${this.value}</div>`);
      });
      
   })

});

edited Jun 26, 2020 at 7:10

answered Jun 26, 2020 at 6:28

Lovesh Dongre

1,34412 silver badges24 bronze badges

1 Comment

Darhan Myrzabek Over a year ago

I think i did not explain well, i need filter like in online shop,so for me it must be checkbox and choose not only one item

Dung Do Tien · Accepted Answer · 2020-06-26 08:14:11Z

0

but then i choose acer and click again to the button it creates again lenovo then acer

Answer: You have two problems.

You registration button click many time. You need off click button event before registration for it.

$('.button-filter').off("click");

.prop("checked") not working correctly, please instead it to .is(":checked")

You can see my demo here

answered Jun 26, 2020 at 8:14

Dung Do Tien

695 bronze badges

Collectives™ on Stack Overflow

How to add unique div on click button

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related