CODEWITHSUNDEEP
javascriptthis
k t
k t

Reputation: 1

where does "this" refer to? (javascript30 --Day10 by Wes Bos)

First of all, I'm a Japanese beginner web devlopment learner. So, My English might be weird and I don't have enough knowledge about programming. I'm taking a course called javascript30 that focuses on various usage of vanilla JS and
I'm currently making a scheme to check the multiple checkboxes by pushing shift button and clicking it(if my explanation doesn't make scence, please copy and paste the source code below)

Accornig to source code, I gotta change the boolean of "inBetween" by setting if sentence. I can understand what he does but I can't understand that where does "this" of "checkbox === this" refer to? Why writing the code like "checkbox === this" means that it checks if check box is checked? And I also struggle to catch the meaning of"let lastChecked". I understand "let lastChecked" is the key to check if it is the last checkbox that was checked by user, but why he set the value of "lastChecked" like "let lastChecked = this"? Sorry for long sentence and poor English. I'll be happy if someone explain it. I'll paste the source code below.

source code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hold Shift to Check Multiple Checkboxes</title>
</head>
<body>
  <style>

    html {
      font-family: sans-serif;
      background: #ffc600;
    }

    .inbox {
      max-width: 400px;
      margin: 50px auto;
      background: white;
      border-radius: 5px;
      box-shadow: 10px 10px 0 rgba(5, 5, 5, 0.1);
    }

    .item {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #F1F1F1;
    }

    .item:last-child {
      border-bottom: 0;
    }


    input:checked + p {
      background: #F9F9F9;
      text-decoration: line-through;
    }

    input[type="checkbox"] {
      margin: 20px;
    }

    p {
      margin: 0;
      padding: 20px;
      transition: background 0.2s;
      flex: 1;
      font-family: 'helvetica neue';
      font-size: 20px;
      font-weight: 200;
      border-left: 1px solid #D1E2FF;
    }
  </style>


  <div class="inbox">
    <div class="item">
      <input type="checkbox">
      <p>This is an inbox layout.</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Check one item</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Hold down your Shift key</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Check a lower item</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Everything in between should also be set to checked</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Try do it without any libraries</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Just regular JavaScript</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Good Luck!</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Don't forget to tweet your result!</p>
    </div>
  </div>

<script>
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');

let lastChecked;

function handleCheck(e) {
  // Check if they had the shift key down
  // AND check that they are checking it
  let inBetween = false;
  if (e.shiftKey && this.checked) {
    // go ahead and do what we please
    // loop over every single checkbox
    checkboxes.forEach(checkbox => {
      console.log(checkbox);
      if (checkbox === this || checkbox === lastChecked) {
        inBetween = !inBetween;
        console.log('Starting to check them in between!');
      }

      if (inBetween) {
        checkbox.checked = true;
      }
    });
  }
  lastChecked = this;
  
}

checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
</script>
</body>
</html>

Upvotes: 0

Views: 94

Answers (2)

Nice Books
Nice Books

Reputation: 1861

Inside a non arrow event listener, this refers to the event target, i.e. the checkbox that was checked/unchecked.

Since you mention that you are a beginner, I'd prefer that you avoid this as much as possible, & instead use event.target to refer the target element inside an event listener.

this has around major meanings depending on the context, & much more in case you use jQuery/jQueryUI.

Upvotes: 0

NullVoid
NullVoid

Reputation: 847

this refers to the clicked checkbox after calling the function in checkbox.addEventListener. In this case, whenever a checkbox (or you can say it as the element with the selector .inbox input[type="checkbox"]) is clicked, the function handleCheck will be called with this referred to the clicked checkbox.

For more info, please visit What does "this" means? and Why is "this" referred to the checkbox in this case?. They provide more detailed and technical info than my explanation :)

Upvotes: 1

Related Questions