Home>

I want to reflect the sentences and numbers entered in the form in console.log.
I tried to find out the cause by comparing it with other cases, but I could not find it.

The browser i am using is "Google Chrome".

<! DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<title>ToDo list</title>
</head>
<body>
 ToDo list 
  <label><input type = "radio" name = "phone">All</label>
  <label><input type = "radio" name = "phone">Working</label>
  <label><input type = "radio" name = "phone">Completing</label>
   ID comment status 
   Add new task 
  <form name = "form" action = "">
      <input type = "text" value = "">
      <button>Add</button>
  </form>
  <script>
    const btn = document.getElementById ('btn');
    const text = document.getElementById ('text');
      btn.addEventListener ('click', () =>{
      console.log (id_text);
    });
  </script>
</body>
</html>

As shown below, even if you change it, if you enter characters in the form, the code will be output as it is, ".
The following similar article about getElementById cannot be solved.
Link content

<! DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<title>ToDo list</title>
</head>
<body>
 ToDo list 
  <label><input type = "radio" name = "phone">All</label>
  <label><input type = "radio" name = "phone">Working</label>
  <label><input type = "radio" name = "phone">Completing</label>
   ID comment status 
   Add new task 
  <form name = "form" action = "">
      <input type = "text" value = "">
      <button type = "button">Add</button>
  </form>

  <script>
    const btn = document.getElementById ('btn');
    const text = document.getElementById ('id_text'). value;

      btn.addEventListener ('click', () =>{
      console.log (text);
    });
  </script>
</body>
</html>

Here is the resolved code.

<! DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<title>ToDo list</title>
</head>
<body>
 ToDo list 
  <label><input type = "radio" name = "phone">All</label>
  <label><input type = "radio" name = "phone">Working</label>
  <label><input type = "radio" name = "phone">Completing</label>
   ID comment status 
   Add new task 
  <p>
      <input type = "text" value = "">
      <button type = "btn">Add</button>
  </p>

  <script>
    const btn = document.getElementById ('btn');
    btn.addEventListener ('click', () =>{
      const text = document.getElementById ('id_text'). value;
      console.log (text);
    });
  </script>
</body>
</html>
  • Answer # 1

    If only

  • Answer # 2

    const btn = document.getElementById ('btn');
    // const text = document.getElementById ('id_text'). value;
    // ↑ Even if we get here, we only have the value when the page is loaded
       btn.addEventListener ('click', () =>{
          const text = document.getElementById ('id_text'). value;
          console.log (text);
       });