Javascript code is not working which supposed to add item inside list

Question

This is my html code:

<!DOCTYPE html>
<html>
<head>
<title>Testing Event Listener</title>
</head>
 <body>
   <h1>Testing Event Listener</h1><br>
   <input id="userinput" type="text" placeholder="Enter Elements">
   <button id="enter">Enter</button>
   <ul>
       <li>Javascript</li>
       <li>Python</li>
       <li>Ruby On Rails</li>
   </ul>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

and this is my javascript code :

var input= document.getElementById("userinput");
var button= document.getElementById("enter");
var ul= document.querySelector("ul");
function inputLenght(){
    return input.value.lenght;
}
function creatListElement(){
    var li=document.createElement("li");
    li.appendChild(document.createTextNode(input.value));    
    ul.appendChild(li);
    input.value="";
}
function addListAfterClick(){
    if(inputLenght> 0){
        creatListElement();
    }
}

button.addEventListener("click",addListAfterClick);

This program is not showing any error but it is supposed to add item inside <ul> and a <li> that we write inside placeholder but it is not doing any thing

If you recived a solution in one of answers below - please mark it as correct answer. Otherwise please specify where you have more problems. — pbialy
– pbialy, Commented Aug 20, 2018 at 13:06

chinloyal · Accepted Answer · 2018-08-19 22:10:04Z

var input= document.getElementById("userinput");
var button= document.getElementById("enter");
var ul= document.querySelector("ul");
function inputLenght(){
    return input.value.length; // spelt length wrong here
}
function creatListElement(){
    var li=document.createElement("li");
    li.innerText = input.value;    
    ul.appendChild(li);
    input.value="";
}
function addListAfterClick(){
    if(inputLenght() > 0){ //Missing brackets from "inputLength"
        creatListElement();
    }
}

button.addEventListener("click",addListAfterClick);

<!DOCTYPE html>
<html>
<head>
<title>Testing Event Listener</title>
</head>
 <body>
   <h1>Testing Event Listener</h1><br>
   <input id="userinput" type="text" placeholder="Enter Elements">
   <button id="enter">Enter</button>
   <ul>
       <li>Javascript</li>
       <li>Python</li>
       <li>Ruby On Rails</li>
   </ul>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

jh314 · Accepted Answer · 2018-08-19 22:05:17Z

You need to call inputLenght in addListAfterClick(), and return input.value.length; instead of input.value.lenght; in inputLength()

var input= document.getElementById("userinput");
var button= document.getElementById("enter");
var ul= document.querySelector("ul");
function inputLenght(){
    return input.value.length; // <- typo here
}
function creatListElement(){
    var li=document.createElement("li");
    li.appendChild(document.createTextNode(input.value));    
    ul.appendChild(li);
    input.value="";
  console.log('foo')
}
function addListAfterClick() {
    if(inputLenght()> 0){ // <- need to call inputLength()
        creatListElement();
    }
}

button.addEventListener("click", addListAfterClick);

he77kat_ · Accepted Answer · 2018-08-19 22:14:43Z

0

You have a typo in your JavaScript:

return input.value.lenght;

Should be:

function inputLenght(){ return input.value.length; }.

Also need to call the function in your handler:

inputLength()

edited Aug 19, 2018 at 22:14

answered Aug 19, 2018 at 22:08

he77kat_

4934 silver badges12 bronze badges

1 Comment

he77kat_ Over a year ago

The title of the function should also be 'inputLength', but you call the name consistently with the typo so isn't a problem there

pbialy · Accepted Answer · 2018-08-19 22:19:39Z

0

This is not working because in addListAfterClick you are checking

if(inputLenght > 0){

instead of

if(inputLenght() > 0){

You are not calling the function, you are checking "if function if greater than zero", which is always false.

To test this - define function f1() {} in console and then run f1 > 0.

--- edit ---

Btw - a better name of this function would be getInputLength, so you know that you'll get some return value, and there's no typo in it (ght -> gth)

answered Aug 19, 2018 at 22:19

pbialy

1,1131 gold badge14 silver badges27 bronze badges

Collectives™ on Stack Overflow

Javascript code is not working which supposed to add item inside list

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related