How to extract element from event object

Question

I am copying some example code from a jQuery lesson, and stumbled on a section about extracting the element from an event object.

I understand evt refers to the clicked element. My book says that evt.target will find which element had the function invoked on it. When I type evt.target in the console though, I get the ReferenceError: evt is not defined. How do you find the element the user clicked?

jQuery code:

$('#btnAddTask').click(function(evt) {  //user clicks 'Add Task' button
evt.preventDefault();
$('#taskCreation').removeClass('not');  //removes the 'not' class, which hides the input fields
});

Full Example (HTML, CSS, jQuery):

@CHARSET "UTF-8";
body, h1, h2, h3, h4, h5, h6, p, ul, dl, ol, form, fieldset, input, label, table, tbody, tfoot, th, tr, td, textarea, select {
    font-family: "helvetica neue", helvetica, "lucinda sans unicode", "sans serif";
    font-weight: normal;
    color: #333;
    padding: 0;
    border: 0;
    margin: 0;
    font-size: 12px;
}
header {
    width: 100%;
    height: 80px;
    background: #d1e0e1;
    color: #333;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    line-height: 80px;
}
footer {
    width: 100%;
    height: 60px;
    background: #d1e0e1;
    font-size: 12px;
    text-align: center;
    line-height: 80px;
    margin-top: 30px;
}
table, th, td {
    border: 1px solid #888;
}
section {
    margin: 20px 0 0 20px;
}
table {
    width: 90%;
    border-collapse: collapse;
}
thead {
    line-height: 30px;
}
thead th {
    background: #53777a;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}
td {
    font-size: 11px;
    line-height: 25px;
    padding-left: 10px;
}
.even {
    background-color: #f8f8f8;
}
nav {
    margin: 15px 0 10px 0;
}
nav a {
    background: #53777a;
    color: #fff;
    width: 80px;
    text-decoration: none;
    border: 1px solid #5b5b5b;
    font-size: 13px;
    text-align: center;
    padding: 5px 10px;
}
label {
    display: block;
    padding: 8px 0 8px 0;
    color: #333;
}
input {
    border-radius: 3px;
    height: 24px;
    border: 1px solid #AAA;
    padding: 0 7px;
}
input.large {
    width: 400px;
}
select {
    border: 1px solid #AAA;
    overflow: hidden;
    margin-right: 15px;
    width: 200px;
}
.required {
    color: red;
}
.not {
    display: none;
}
.rowHighlight {
    font-weight: bold;
}
label.error {
    color: red;
    font-weight: bold;
}
.overdue {
    background: #F7DCE5;
}
.warning {
    background: #F7F7DC;
}
.taskCompleted {
    text-decoration: line-through;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Task list</title>
  <link rel="stylesheet" type="text/css" href="styles/tasks.css" media="screen" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>

<body>
  <header>
    <span>Task list</span>
  </header>
  <main>
    <section id="taskCreation" class="not">
      <form>
        <div>
          <label>Task</label>
          <input type="text" required="required" name="task" class="large" placeholder="Breakfast at Tiffanys" />
        </div>
        <div>
          <label>Required by</label>
          <input type="date" required="required" name="requiredBy" />
        </div>
        <div>
          <label>Category</label>
          <select name="category">
            <option value="Personal">Personal</option>
            <option value="Work">Work</option>
          </select>
        </div>
        <nav>
          <a href="#">Save task</a>  <a href="#">Clear task</a>
        </nav>
      </form>
    </section>
    <section>
      <table id="tblTasks">
        <colgroup>
          <col width="50%">
            <col width="25%">
              <col width="25%">
        </colgroup>
        <thead>
          <tr>
            <th>Name</th>
            <th>Due</th>
            <th>Category</th>
          </tr>
        </thead>
        <tbody>
          <tr data-priority="high">
            <td data-name-field="true">Return library books</td>
            <td>
              <time datetime="2013-10-14">2013-10-14</time>
            </td>
            <td>Personal</td>
          </tr>
          <tr data-priority="medium">
            <td data-name-field="true">Perform project demo to stakeholders</td>
            <td>
              <time datetime="2013-10-14">2013-10-14</time>
            </td>
            <td>Work</td>
          </tr>
          <tr data-priority="low">
            <td data-name-field="true">Meet friends for dinner</td>
            <td>
              <time datetime="2013-10-14">2013-10-14</time>
            </td>
            <td>Personal</td>
          </tr>
        </tbody>
      </table>
      <nav>
        <a href="#" id="btnAddTask">Add task</a>
      </nav>
    </section>
  </main>
  <footer>You have 3 tasks</footer>
</body>
<script>
  $('[required="required"]').prev('label').append('<span>*</span>').children('span').addClass('required');
  $('tbody tr:even').addClass('even');
  $('#btnAddTask').click(function(evt) {
    evt.preventDefault();
    $('#taskCreation').removeClass('not');
  });
</script>

</html>

if you -- console.log(evt) -- you will see the object in its entirety in the console and how its structured — Tasos, Apr 08 '16 at 04:11

score 1 · Answer 1 · edited May 23 '17 at 12:24

evt is undefined in the console because that variable only has scope inside the click() callback function. When you type into the console, you are outside the scope of any function. However, inside of that function you have access to the variable, which is where you would use it anyway:

$('#btnAddTask').click(function(evt) {  //user clicks 'Add Task' button
    //HAVE ACCESS TO evt HERE
    evt.preventDefault();
    console.log(evt.target);
});

For a great explanation of javascript scope, I'd suggest reading this Stack Overflow post.

score 0 · Answer 2 · answered Apr 08 '16 at 04:18

Try this:

                $('#btnAddTask').click(function(evt) { 
                        $('#taskCreation').removeClass('not'); 
                        evt.preventDefault();
                });

This is working on my system :

                $('#btnAddTask').on('click', function() {
                     $('#taskCreation').removeClass('not'); 
                });

How to extract element from event object

2 Answers2