2

"use strict";

const listbox = document.getElementById("list");
const tablebox = document.querySelector(".table");

//eventlistener
listbox.addEventListener("click", showTable());

function showTable() {
  let childList = listbox.childNodes;
  switch (childList) {
    case childList[0]:
      console.log("1");
      tableBox.innerText += "<div>1<div>"
      break;
    case childList[1]:
      console.log("2");
      tableBox.innerText += "<div>2<div>"
      break;
    case childList[2]:
      console.log("3");
      tableBox.innerText += "<div>2<div>"
      break;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div><select name="ramdom" id="list">
      <option value="randummy1">1</option>
      <option value="randummy2">2</option>
      <option value="randummy3">3</option>
    </select>
  </div>

  <div class="table">  </div>
  <script src="/question/qusetion.js"></script>

  </body>
</html>

Hello, I'm new to coding, and currently, I'm working project on my own But I'm stuck in the middle and don't know how to solve this problem. I googled it also, but I don't think I can understand what other people wrote at my level. So, I hope some people can tell me what is wrong with my code and how to solve it (If it's not much bothering you:) )

Here is what I intended:

When people choose option 1, "addeventlistenter" react and it callback "showTable" function. "showtable" function check which childNode of listbox is just activated, and if it's first option(value is randummy1) value, function gonna write "1<div" string in second div(class name is table) second and third options are gonna work in the same way too.

I tried to make the above function and wrote console.log for double-checking, but any of one is not working which means I totally failed it. If someone can explain how I was wrong and tell me how to do, it would be a big help. thankx!

geo
  • 821
  • 1
  • 8
  • 15
  • `listbox.addEventListener("click", showTable());` calls `showTable` immediatly and passes the result of it as callback, it has to be `listbox.addEventListener("click", showTable);` without those `()` – t.niese Jun 11 '21 at 18:36
  • First thing you can change is `listbox.addEventListener("click", showTable());` => `listbox.addEventListener("click", showTable, false);` You don't call functions, you pass them into eventListeners. The false flag stands for the useCapture flag to prevent event bubbling https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener. Now you can use `this` inside your handler to refer to the called element listbox or avoid using `this` and use `event.target` instead but you need to specify it in the function initialization `showTable(event)`. – Supportic Jun 11 '21 at 18:38
  • @Supportic `The false flag stands for the useCapture flag to prevent event bubbling` is a bit misleading. It defines whether a callback is called for the capturing or event bubbling phase. But the flag by itself does not stop the bubbling. You can prevent the propagation of the event within the callback, – t.niese Jun 11 '21 at 18:43
  • @t.niese yes true, sorry. Ironically it's also called useCapture "or not" :D event.stopPropagation() prevents it. @user15508209 `const tableBox = document.querySelector('.table');` => "box" was lower case I made an working example: https://jsbin.com/ralesuriqo/edit?html,js,console,output Be aware that it only triggers if the value inside the list changes. – Supportic Jun 11 '21 at 19:03
  • @Supportic why `Ironically it's also called useCapture`? An event that happens first propagates down the DOM in the capturing phase and propagates up again in the bubbling phase. And with the flag, you say if you want to attach the event listener for the capturing phase or the bubbling phase. So why it is "ironically"? – t.niese Jun 11 '21 at 19:10
  • @t.niese because I couldn't figure it out at first but the name is already telling me to "use capture - or not". ^^ – Supportic Jun 11 '21 at 19:11
  • thanks! I solved the problem and your comments help me a lot @t.niese – geo Jun 14 '21 at 12:58

0 Answers0