CODEWITHSUNDEEP
javascripthtml
charanPreet
charanPreet

Reputation: 35

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

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

Upvotes: 0

Views: 423

Answers (4)

pbialy
pbialy

Reputation: 1083

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)

Upvotes: 0

he77kat_
he77kat_

Reputation: 493

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

Upvotes: 0

chinloyal
chinloyal

Reputation: 1151

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>

Upvotes: 1

jh314
jh314

Reputation: 27812

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

Upvotes: 0

Related Questions