innerHTML失败案例

问题描述:

我正在制作一个带有文本字段的交互式应用程序来练习JavaScript,但是我发现要进行验证,尽管该函数的其余部分循环,但该案例不显示innerHTML文本。 text.innerHTML适用于所有其他情况,我是否在这里丢失了某些东西?innerHTML失败案例

的Javascript

function getNum(input){ 
    if (isNaN(input)) { 
     oldstate = state-1; 
     state = 33; 
     console.log("Loading error Message..."); 
     act(); 
    } 
    else{return(parseInt(input, 10));} 
} 

function act(){ 
    console.log("Case: "+state); 
    input = inputf.value; 
    inputf.value=""; 
    switch(state){ 
     case 0: 
      name = input; 
      text.innerHTML = "Well, hello there, "+name+"! Nice to meet you. What's your age?"; 
      break; 
     case 1: 
      text.innerHTML = "Loading..."; 
      age = getNum(input); 
      text.innerHTML = "So, "+name+" you are "+age+" years old!"; 
      break; 
     case 33: 
      text.innerHTML = "That is NOT a number! Hit Submit to Return."; 
      console.log("Error Successfully loaded!"); 
      state = oldstate; 
      break; 
    } 
    state=+1; 
} 


function getStr(input){ 

} 

这是我的HTML与文本字段的ID。任何优化建议也将不胜感激。

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <title>titles are lame</title> 
     <link/> 
     <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
     <script type="text/javascript" src="script.js"></script> 
     <script></script> 
    </head> 
    <body> 
<div id="wrapper"><div id="text">First, let's have your name.</div> 
    <br> 
    <input type='text' id="input"><input type="submit"id="submit" onclick="act()"> 

</div> 
    <script> 
    var state = 0; 
    var inputf = document.getElementById("input"); 
    var text = document.getElementById('text'); 
    var input, name, age,oldstate; 

    document.getElementById("input").addEventListener("keydown", function(e) { 

    // Enter is pressed 
    if (e.keyCode == 13) { act(); } 
}, false); 
    </script> 
    </body> 
</html> 
+0

如果你按下了'enter'它将工作...所以是什么问题? – lolo 2013-03-22 15:17:58

+0

对于我来说,“这不是一个数字”错误不会显示,如果你调试,并没有提供一个数值时,要求年龄。它反而会反弹,并说你是不确定的岁。它应该会抛出一个错误。 – Signify 2013-03-22 15:19:35

我想我知道是什么问题。在情况1中,您调用getNum方法,它在正确的情况下执行得很好,调用act()方法,正确输入个案33,返回一个错误,然后...继续执行第1种情况。因为您没有指定返回在getNum函数的第一种情况下的陈述,age有一个未定义的值。如果你加入这一行应该很好地工作:

if (!age) return;

只是调用getNum方法的情况下,经过1

编辑:我只是意识到,你也应该检查检测到错误后如何状态管理。添加我给你将离开的33

点击here的状态看便知行..

act() //Changed