Неопределенное в текстовое поле

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

Во-первых, создать класс DIV = слов, а затем скрытое текстовое поле с идентификатором 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>

источник

2013-11-15 stephen kronwith

Я попытался добавить начальное значение в текстовое поле, но оно просто печатает вместе с большим неопределенным. –

Почему бы вам не добавить свой комментарий к этим вопросам? Также, пожалуйста, отредактируйте его и отформатируйте его лучше, он в настоящее время похож на стену с текстом. – tjons

Я добавил комментарий после публикации, так как я просто подумал о том, чтобы попытаться ответить на вопрос. Я переформатировал –

Почему вы смешиваете jQuery и не-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 к исходному значению текстового поля, которое пусто - вот почему текст исчезает. This jsFiddle работает, основываясь на моем понимании того, что вы пытаетесь сделать.

источник

2013-11-15 02:50:43

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

Неопределенное в текстовое поле

ответ

Смежные вопросы