Why do userinput shows as "undefined"?

Question

Problem solved in the comments.Thanks everybody!

I only start to learn JavaScript and begin to figure out how DOM works.But when I try to append userinput(stored in the var) value to the end of the list,I get "undefined",although everything works with the text.

As I understand,it means that there is no value stored in the variable,but the author,which JS course I am currently watching,has almost the same code,but everything works.I tried to redefine the Id/class names for the variables,test with the string instead of the variable(everything is working) and make the code identical to the author,but it still gives me the same error.

var button = document.getElementById("button");
var modify_list = document.getElementsByClassName("userinput");
var ul = document.querySelector("ul");

button.addEventListener("click", function(){
 console.log(modify_list.value);
 var li = document.createElement("li");
 li.appendChild(document.createTextNode(modify_list.value));
 ul.appendChild(li);
})

<!DOCTYPE html>
<html>
 <head>
  <title>DOM</title>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
  <h1>What plans do I have till the end of the summer?</h1>
  <p>They are:</p>
  <input type="text" name="add activities" class="userinput" placeholder="add activities">
  <button id="button">Send</button>
  <ul>
   <li>Learn German</li>
   <li>Learn Japanese</li>
   <li>Learn Java Script</li>
   <li>Physical activities</li>
  </ul>
  <script type="text/javascript" src="script.js"></script>
 </body>
</html>

document.getElementsByClassName("userinput")[0].value will do the thing.. — Jaydeep, Jul 25 '19 at 11:05
@Quentin, thanks for help,I found the problem.Didn't find the post when looking.Can be closed now. — EndOfTheGlory, Jul 25 '19 at 11:05
@J D Thank you,it's because Classes are plurals and we must define it's the first element,right? — EndOfTheGlory, Jul 25 '19 at 11:07
@EndOfTheGlory — It was closed before you made that comment. If you want to delete it, then you have to do that yourself. — Quentin, Jul 25 '19 at 11:11
Modify this line var modify_list = document.getElementsByClassName("userinput")[0]; — debugmode, Jul 25 '19 at 11:32

Why do userinput shows as "undefined"?

0 Answers0