Не определено в текстовой области

0

Следующий код должен сделать следующее:

Сначала создайте div class= words, а затем скрытую текстовую область с id txtarea и кнопку с классом btn2. Я хочу, чтобы это произошло:

Страница открывается абзацем в словах div, который будет исчезать, оставляя скрытую текстовую область и кнопку. Затем пользователь вводит текст в текстовое поле, нажимает кнопку, а текстовое поле и кнопка исчезают и заменяются словами div, теперь с текстом, введенным пользователем из текстового поля.

Все работает хорошо, пока абзац не исчезнет. Тогда я получаю текстовое поле со словом "undefined". Если я набираю текст и ударяю по botton, как и ожидалось, текстовое поле исчезает вместе с кнопкой, но остается "неопределенным". Обратите внимание, что настройка была включена, так как я продолжал получать 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>
  • 0
    Я попытался добавить начальное значение к текстовой области, но оно просто печатает вместе с большим неопределенным.
  • 1
    почему бы вам не добавить свой комментарий к вопросам? Также, пожалуйста, отредактируйте его и отформатируйте лучше, в настоящее время он похож на текстовую стену.
Показать ещё 1 комментарий
Теги:

1 ответ

0

Почему вы смешиваете jQuery и non-jQuery? Не делайте этого:

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

Сделай это:

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

Обратите внимание, что у вас отсутствовала точка с запятой в area.value выше, что также, вероятно, не помогает. Вы также пропустили точку с запятой после $('.words').html("<pre>" + str + "</pre>").

Вы должны запустить JSLint в своем коде, чтобы выявить проблемы, такие как отсутствующие точки с запятой.

EDIT: ваша функция устанавливает содержание div с помощью words класса в исходное значение текстового поля, которое пусто - поэтому ваш текст исчезает. Этот jsFiddle работает, основываясь на моем понимании того, что вы пытаетесь сделать.

Поделиться
  • 0
    Почти готово. Следовал всем вашим советам и все работает хорошо гораздо дольше. Однако после ввода текста в textarea и нажатия кнопки все исчезает, включая следующий текст в словах div, которые я бы сейчас хотел показать. Что я не понимаю? Спасибо

Ещё вопросы

Сообщество Overcoder
Наверх
Меню