CODEWITHSUNDEEP
jquerylist
HJW
HJW

Reputation: 1032

to-do list item does not get added to div

as one of my first projects i am trying to get this to-do list to work. On Codecademy it works just fine, but when executing on codepen I get no return:

https://codepen.io/HelleFl/pen/OjNQop

<div class='form'>
    <form name="checkListForm">
      <input type="text" name="checkListItem"/>
      <button class='btn btn-primary'>Add!</button>
      <hr>
  </div>

  <div>
    <h3>My to-do list</h3>
    <div class='container'>
      <div class='list'>

      </div>

    </div>
  </div>  
</div>

JS:

$(function(){
  $('#button').click(function(){
    var toAdd = $('input[name=checkListItem]').val();
    $('.list').append('<div class="item">' + toAdd + '</div>');
  })
})

Why does the item not get added to the list? Thank you

Upvotes: 0

Views: 35

Answers (3)

Shiladitya
Shiladitya

Reputation: 12171

Here you go with some validation as well https://jsfiddle.net/tgq4vsdt/1/

$(function(){
  $('#button').click(function(){
  	if( $('input[name=checkListItem]').val().trim() != ""){
      var toAdd = $('input[name=checkListItem]').val();
      $('.list').append('<div class="item">' + toAdd + '</div>');
    }
    $('input[name=checkListItem]').val('').focus();
  })
})
.header, .form, h3, h4 {
  text-align: center;
}

.header {
  margin-bottom: 2em;
}

hr {
  width: 50%;
  color: green;
  border-width: 1px;
  border-style: inset;
}

h3 {
  text-decoration: underline;
}

.container {
  background-color: lightgray;
  padding-bottom: 3em;
  padding-top: 1em;
  width: 30%;
}

.item {
  color: black;
  font-size 18px;
  border-bottom: 1px solid black;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='header'>
    <h1>Simple to-do list</h1>
    <h4>Simply type your item and click add</h4>
  </div>
  
  <div class='form'>
   	<input type="text" name="checkListItem"/>
    <button class='btn btn-primary' id="button">Add!</button>
  </div>
  
  <div>
    <h3>My to-do list</h3>
    <div class='container'>
      <div class='list'>
      </div>
    </div>
  </div>  
</div>

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42374

The problem is that you're targeting #button, but have no element with that ID. You're instead just looking to target the generic $('button').

Also note that your button is currently inside an (incomplete) form. You'll need to remove the form component, so that you don't actually POST anywhere (which would refresh the page). As an alternative to removing the form's HTML, you can prevent the form submission with e.preventDefault().

Here's an updated script removing the form and correcting the click() target:

$(function() {
  $('button').click(function() {
    var toAdd = $('input[name=checkListItem]').val();
    $('.list').append('<div class="item">' + toAdd + '</div>');
  })
})
.header,
.form,
h3,
h4 {
  text-align: center;
}

.header {
  margin-bottom: 2em;
}

hr {
  width: 50%;
  color: green;
  border-width: 1px;
  border-style: inset;
}

h3 {
  text-decoration: underline;
}

.container {
  background-color: lightgray;
  padding-bottom: 3em;
  padding-top: 1em;
  width: 30%;
}

.item {
  color: black;
  font-size 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div class='header'>
    <h1>Simple to-do list</h1>
    <h4>Simply type your item and click add</h4>
  </div>

  <div class='form'>
    <input type="text" name="checkListItem" />
    <button class='btn btn-primary'>Add!</button>
  </div>

  <div>
    <h3>My to-do list</h3>
    <div class='container'>
      <div class='list'></div>
    </div>
  </div>
</div>

Hope this helps! :)

Upvotes: 1

Maarten van Tjonger
Maarten van Tjonger

Reputation: 1927

Looks like you forgot to give your button an id.

Upvotes: 1

Related Questions