如何解决Javascript代码无效,应该在列表中添加项目?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (78)

这是我的html代码:

<!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>   

javascript代码:

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); 
提问于
用户回答回答于

需要调用inputLenght中addListAfterClick(),并返回input.value.length;,而不是input.value.lenght;在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); 
用户回答回答于

JavaScript中有拼写错误:

return input.value.lenght;

应该:

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

还需要在你的处理程序中调用该函数:

inputLength()

扫码关注云+社区

领取腾讯云代金券