.val()?! ?But why?


#1

The following program passed but notice that I didn't use the .val() function.

$(document).ready(function() {
$(#button).click(function(){
var toAdd = $('#checkListItem');
})
})

If the var toAdd = $('#checkListItem') defines toAdd and assigns it a value equal to the HTML element with an id of checkListItem then why do we need a .val() statement?


#2

@williab3,
I think it is better, if one understands the concept.

It all start's with you,
using a Browser
in which you load a HTML-file,
which we will call the HTML-Document.

This document has a minimal build of


<!DOCTYPE html>
  <html>
     <head>
          <title> </title>
     </head>
     <body>
     </body>
  </html>

The Browser =load's= this document into Memory
in a pattern that is described as
the Document Object Model
in short the DOM.
( the interpretation of the DOM is Browser & Version specific )

            html
             |
       +-----+------+
       |            |
     head          body
       |
     title

In the description of your document in DOM-talk...
you will encounter terms like:
parent children sibling descendants ascendants...

The HTML-Element has no parent
but is a parent to 2 child-Element's
the 'head'-Element
and
the 'body'-Element.

The 'head'- and 'body'-Element,
both being children to the 'html'-Element
are siblings to each-other.

The 'head'-Element is parent to the 'title'-Element...
the 'title'-Element is a child of the 'head'-Element
the 'title'-Element is also a descendant of the 'html'-Element.

The DOM has several interface's
over which you can access the data**/**information
held by the DOM.

One of the interface's is the Element-interface
you can divide the interface into
properties ( consisting of a property-key and it's associated VALUE )
and
methods ( giving you the functionality to manipulate the Elements )
https://developer.mozilla.org/en-US/docs/Web/API/Element
https://developer.mozilla.org/en-US/Learn/HTML/HTML_tags


====================================

Document Object Model ( in short DOM )

                  html
                   |
       + - - - - - + - - - - - -+
       |                        |
      head                     body
       |                        |
 + - - + - - -+                 |
 |     |      |                 |
title link script               |
                                |
+ - - -+ - - - - - - - - - - - ++- - - - - +
|      |                       |           |
h2    form                    div         div
       | #checkListForm       #button      | .list
       |                                   |
     input                              [ li ]
       | =name= Attribute            =line Node's=
       |  checkListItem
       |
    [ text ]
  =text Node=

If you use $()
you are actually using jQuery()
which is also called the jQuery-Selektor

jQuery will create a so-called jQuery Selection Object
with it's own length property
( Each property has an =associated Value= )
and the length property will have an associated number Value

This number Value represents the =number-of-HTML-Elements= found,
using the specified jQuery-Selector.
( the jQuery Selection Object will also contain all of the descendants of those HTML-Elements )

https://api.jquery.com/category/selectors/
using the attribute-equals Selector
https://api.jquery.com/attribute-equals-selector/

var toAdd1 = $('input[name=checkListItem]').length;

( toAdd1 equals 1, as the Selector $('input[name=checkListItem]') stands for
=all HTML-Elements with input-Tag AND name-attribute equals checkListItem= )

var toAdd2 = $('input[name=checkListItem]').val().length;

( toAdd2 equals zero 0 when the input text-Node contains no characters when #button is =clicked= )

( toAdd2 greater > zero when the input text-Node contains characters when #button is =clicked= )

To get a better feeling of the situation at hand
use

 $(document).ready(function(){
    $('#button').click(function(){
    //var toAdd =$('input[name=checkListItem]').val();
    var toAdd1 = $('input[name=checkListItem]').length;
    var toAdd2 = $('input[name=checkListItem]').val().length;
    $('<p>').text(
    "[HTML-Elements found:"+toAdd1+"] "+
    "[length input-text:"+toAdd2 +"]").appendTo('body');
    });

 });

Script error? Big problemo on "Append to body"
Why the result is undefined?