Question

以下代码将执行以下操作：

首先，创建一个div class = words，然后创建一个id为txtarea的隐藏textarea和一个类为btn2的按钮。我想要发生的是：

页面打开时，div字段中的一个段落将淡出，留下隐藏的textarea和按钮。用户然后在textarea中输入文本，按下按钮，textarea和按钮消失，并替换为div字样，现在用户从textarea输入文本。

一切都运作良好，直到段落淡出。我得到的是textarea，单词“undefined”。如果我输入任何文本并按下按钮，正如预期的那样，textarea会随按钮一起消失，但“undefined”仍然存在。请注意，包含settimeout是因为我在加载段落之前保持javascript开始，即使我认为$ document.ready函数是为了防止这种情况。提前谢谢。

<!DOCTYPE html>
<html>
<head>
    <title> this is the title</title>
<style>
    p {
        font-family: "Times New Roman",TImes, serif;
    }
    pre{
        white-space:pre-wrap;font-family: "Times New Roman",TImes, serif
    }
    .words {
        position:absolute;width:auto;height:auto;top:260px;left:265px;right:225px;text-align:center;color:black;
        font-size: 60px;
    }
</style>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>

<script>
    $(document).ready(function(){
        setTimeout(function(){
            $("p").fadeOut();
            $("#newtext").fadeIn();
            var area = document.getElementById("newtext");
            str = area.value
            $('.words').html("<pre>" + str + "</pre>")
            $(".btn2").click(function(){
                $("#newtext").fadeOut()
            });
        },5000);
    });
</script>
</head>
<body>
    <div class ="words">
        <p> When this fades out, enter text.</p>
    </div>
    <div id="newtext" style="display:none" >
        <textarea rows="50" cols="200" id = "txtArea"  > </textarea>
        <button class="btn2">SEE YOUR TEXT</button>
    </div>
</body>
</html>

Answer 1

为什么要混合使用jQuery和非jQuery？不要这样做：

var area = document.getElementById("newtext");
str = area.value

这样做：

var area = $('#newtext');
str = area.val();

请注意，您在上面的area.value中缺少分号，这也可能无济于事。您在$('.words').html("<pre>" + str + "</pre>")之后也错过了分号。

您应该在代码上运行JSLint以发现丢失分号等问题。

编辑：您的函数正在将具有类words的div的内容设置为textarea的起始值，该值为空 - 这就是您的文本消失的原因。 This jsFiddle根据我对您要做的事情的理解而有效。

在textarea中未定义

1 个答案: