0

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>
k t
  • 1
  • 1
  • 2
  • Does this answer your question? [Using this inside an event handler](https://stackoverflow.com/questions/17665489/using-this-inside-an-event-handler) – lusc Feb 06 '22 at 10:52

2 Answers2

1

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 :)

Henryc17
  • 851
  • 4
  • 16
  • i think this link is better: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#:~:text=The%20value%20of%20%22this%22%20within%20the%20handler – Nils Schwebel Feb 06 '22 at 10:56
  • @Nils Schwebel, oh yea thx – Henryc17 Feb 06 '22 at 10:57
  • Thank you for answering my question. I can understand that "this" refers to event target in this context. But I'm still not clear about one point.Why writing "this" means that each box is clicked. I guess it is because of following logic. 1.This refers to event target(in this case it means each checkbox) --> 2.Each box is monitored whether it'll be clicked by addEventListener --> 3.When each checkbox is clicked, handleClick will be called and "this" will become the object(in this case, it means each checkbox that was clicked) Is this thought correct? Sorry for long sentence. – k t Feb 06 '22 at 15:12
  • @k t Yes, it is totally correct :) – Henryc17 Feb 06 '22 at 15:35
  • Thank you so much, you saved me! – k t Feb 06 '22 at 16:13
0

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.

Nice Books
  • 1,675
  • 2
  • 17
  • 21
  • Thank you for telling me an advice. I got it. That way seems to be more directly and easier to understand. – k t Feb 06 '22 at 15:16