简体   繁体   English

innerHTML大小写失败

[英]innerHTML failing on case

I am making a interactive application with a text field to practice javascript, but I am finding for validation, that the case does not display innerHTML text though the rest of the function loops though. 我正在制作一个带有文本字段的交互式应用程序来练习javascript,但是我发现需要进行验证,尽管其余函数循环了,但这种情况下并没有显示innerHTML文本。 text.innerHTML works in all other cases, am I missing something here? text.innerHTML在所有其他情况下都可以使用,我在这里缺少什么吗?

Javascript Java脚本

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

}

Here is my HTML with the text field id's. 这是我的带有文本字段ID的HTML。 Any optimization suggestions would also be appreciated. 任何优化建议也将不胜感激。

HTML 的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>

I think I know what the problem is. 我想我知道问题出在哪里。 In case 1, you call the getNum method, it executes just fine in the correct case, calls the act() method, enters case 33 correctly, returning an error and... then keeps executing case 1. Because you didn't specify a return statement in the first case of the getNum function, age has an undefined value. 在情况1中,您调用getNum方法,它在正确的情况下执行得很好,然后调用act()方法,正确地输入情况33,返回错误,然后继续执行情况1。因为您未指定在getNum函数的第一种情况下的return语句中,age具有未定义的值。 It should work fine if you add this line: 如果添加以下行,它将正常工作:

if (!age) return;

just after calling the getNum method in case 1. 在情况1中调用getNum方法之后。

EDIT: I just realized you should also check how state is managed after detecting an error. 编辑:我刚刚意识到您还应该检查检测到错误后如何管理状态。 Adding the line I gave you will leave a state of 33. 添加我给您的行将保持33状态。

单击此处查看答案。

 act() //Changed

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM