0

下面的代码是为了做到以下几点：

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

该页面以 div 单词中的段落打开，该段落将淡出，留下隐藏的文本区域和按钮出现。然后用户在 textarea 中输入文本，按下按钮，textarea 和 button 消失并被替换为 div 单词，现在由用户从 textarea 输入的文本。

一切正常，直到段落淡出。然后我得到的是带有“未定义”一词的文本区域。如果我输入任何文本并点击按钮，则文本区域会与按钮一起消失，但“未定义”仍然存在。请注意，由于我一直在加载段落之前启动 javascript，因此包含了 settimeout，即使我认为 $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>
4

1 回答 1

0

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

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

做这个：

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

请注意，您在area.value上面缺少分号，这也可能没有帮助。您还缺少 . 之后的分号$('.words').html("<pre>" + str + "</pre>")。

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

编辑：您的功能是将带有类的 div 的内容设置为wordstextarea 的起始值，该值是空的——这就是您的文本消失的原因。 这个 jsFiddle有效，基于我对你正在尝试做的事情的理解。

于 2013-11-15T02:50:43.770 回答