Change li element class when pressing a button and in that css class change background color

Question

I have a todo app.

I managed to make it show an input when pressing the add button and to delete randomly, but when I click the done button I want to change the li element class to a class that has css background color red, but it doesn't work. I tried with jquery but it still doesn't work. The red background suggests that the task is done.

index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" type="text/css" href="stil.css">
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="centru">


    <div class="row">
      <div class="col-lg-12">
        <h2>TO DO LIST</h2>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-6">
        <input type="text" class="form-control" id="usr" placeholder="Input task...">
      </div>
      <div class="col-lg-6">
        <button type="button" class="btn btn-primary" onclick="adauga()">Add task</button>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <ul class="list-group" id="lista1">

        </ul>
      </div>

    </div>



    </div>




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

script.js


    function adauga() {

    var inp = document.getElementById('usr').value;
    var list = document.getElementById('lista1');
    var li = document.createElement('li');
    var lungime =  document.getElementById("lista1").getElementsByTagName('li').length;
    for(var i = 0; i < lungime ; i++) {

    li.setAttribute("id",i);

    }
     li.appendChild(document.createTextNode(inp));

     var button = document.createElement("button");
     button.innerHTML = "Delete";
     button.setAttribute("class","btn btn-primary ste");
     button.setAttribute("onclick","sterge()");

     //button.setAttribute("class","ste");
     li.appendChild(button);
     list.appendChild(li);

  //////////////////////////////////////

    var button2 = document.createElement("button");
    button2.innerHTML = "Done";
    button2.setAttribute("class","btn btn-primary done");
    button2.setAttribute("onclick","done()");

    li.appendChild(button2);
    list.appendChild(li);


    }

    function change() {
    li.setAttribute("class","xxx");
    }

    function sterge() {

    $('body').on('click','.ste', function(){
    $(this).parent().remove();
    });

    }

    function done() {
    $('body').on('click','done',function(){
    $(this).parent().setAttribute("class","btn btn-primary done xxx");
    });
    }

stil.css

    .centru {
     width: 600px ;
     margin-left: auto ;
     margin-right: auto ;

    }

    .lix {
     padding-right: 20px;
     }

    .xxx {
    background-color: red;
    color:red;
    }

amira ahmed · Accepted Answer · 2019-01-20 08:22:55Z

1

you can use addClass function on done function like this

function done() {
    $('body').on('click','.done',function(){
    $(this).parent().addClass("btn btn-primary done xxx");
    });
    }

answered Jan 20, 2019 at 8:22

amira ahmed

862 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change li element class when pressing a button and in that css class change background color

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related