skip to Main Content

I am trying to make my code so that when I click on a added list item, it changes the color red, as well as add a slash through it. The full code for the program is below

 <html lang="en">
<head>
<meta charset="utf-8">
<title>Ultimate List Maker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
        
* {margin:0; padding:10px; text-align:center;}  
body {width:80%; margin:40px auto; min-width: 400px; max-width: 600px}
header {background:red}
#counters {background:lightgreen;font-weight: bold; font-size: 150%;display: flex; justify-content: space-around; flex-wrap: wrap}
button {background: #ff9999; width: 100px; }
main {background:yellow; min-height: 80px}
footer {background:lightblue}
button:hover {background: pink}
li {list-style: none; font-weight: bold; font-size: 150%}
.complete {color: red; text-decoration: line-through}

 </style>
</head>
 <body>


 <main>

 <ul id="list">
 <li></li>
 </ul>

 <button id="showForm">Add New Item</button>

 <form id="newItemForm">
   <input type="text" id="itemDescription" placeholder="Add description">
   <input type="submit" id="add" value="add">
 </form>

 </main>

 <footer><h2>Making lists since 2018</h2></footer>

 <script>

 $(document).ready(function(){
  $('#showForm').click(function(){
      var li = $('#itemDescription').val();
      $('#list').append('<li>'+li+'</li>');
   });
 });

</script>

</body> 

</html>

Ive tried this line of code, but it does not do anything when the item is clicked

$(document).ready(function(){
 $("li").click( function() { 
 $("li").css("color", "#d49a9a");
 $(this).css("color", "#c2c0c0");
  });
});

2

Answers


  1. <!-- @format -->
    
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>Ultimate List Maker</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <style>
          * {
            margin: 0;
            padding: 10px;
            text-align: center;
          }
          body {
            width: 80%;
            margin: 40px auto;
            min-width: 400px;
            max-width: 600px;
          }
          header {
            background: red;
          }
          #counters {
            background: lightgreen;
            font-weight: bold;
            font-size: 150%;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
          }
          button {
            background: #ff9999;
            width: 100px;
          }
          main {
            background: yellow;
            min-height: 80px;
          }
          footer {
            background: lightblue;
          }
          button:hover {
            background: pink;
          }
          li {
            list-style: none;
            font-weight: bold;
            font-size: 150%;
          }
          .complete {
            color: red;
            text-decoration: line-through;
          }
        </style>
      </head>
      <body>
        <main>
          <ul id="list"></ul>
    
          <button id="showForm">Add New Item</button>
    
          <form id="newItemForm">
            <input type="text" id="itemDescription" placeholder="Add description" />
            <input type="button" id="add" value="add" />
          </form>
        </main>
    
        <footer><h2>Making lists since 2018</h2></footer>
    
        <script>
          // $(document).ready(function () {
          $("#add").click(function (e) {
            e.preventDefault;
            $("#list").append(
              "<li class='li'>" + $("#itemDescription").val() + "</li>"
            );
            
            $(".li").click(function () {
              $(this).css("background", "#d49a9a");
              // $(this).css("color", "#c2c0c0");
            });
          });
    
          // });
        </script>
      </body>
    </html>
    1. First you have to ensure prevent submitting form to not reload page.

    2. Append this "<li class='li'>" + $("#itemDescription").val() + "</li>"

    3. Whenever you click a list only that list element will be changed

                    $(this).css("background", "#d49a9a");
                    // $(this).css("color", "#c2c0c0");
                  });
      
      

    I hope you have got your solution

    Login or Signup to reply.
  2. I’m assuming that when the <input type="submit"> button is pushed everything disappears so you have another button added unnecessarily. Whenever a <input type="submit"> or <button></button> that’s inside a <form> is clicked, a "submit" event is triggered. So instead of using a "click" event on a <button> outside of <form> use the "submit" event triggered on the <form>. The default behavior when a <form> is submitted is to send it’s data to a server and leave a blank page if there’s no response from the server. In order to avoid a blank page use event.preventDefault().

    The next problem is resolved by toggling the ".complete" class on any <li> the user clicks.

    $("#list").on("click", "li", function() {
      $(this).toggleClass("complete");
    });
    

    Example

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <title>Ultimate List Maker</title>
      <style>
         :root {
          font: 2ch/1.25 "Segoe UI";
        }
        
        main {
          display: flex;
          flex-flow: column nowrap;
          justify-content: center;
          align-items: center;
          min-height: 80px;
          padding: 20px 10px;
          background: yellow;
        }
        
        input {
          font: inherit;
        }
        
        [type="submit"]:hover {
          cursor: pointer;
          background: pink
        }
        
        #list {
          margin-left: -40px;
        }
        
        li {
          list-style: none;
          font-weight: bold;
          font-size: 150%
        }
        
        li:hover {
          cursor: pointer;
        }
        
        .complete {
          color: red;
          text-decoration: line-through;
        }
      </style>
    </head>
    
    <body>
      <main>
        <form id="UI">
          <input id="desc" placeholder="Add description">
          <input type="submit" value="Add">
        </form>
        <ul id="list"></ul>
      </main>
    
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script>
        $('#UI').on("submit", function(event) {
          event.preventDefault();
          let li = `<li>${$('#desc').val()}</li>`;
          $('#list').append(li)
        });
        $("#list").on("click", "li", function() {
          $(this).toggleClass("complete");
        });
      </script>
    
    </body>
    
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search