<MyRusakov.ru />

Вёрстка сайта с нуля 2.0

Вёрстка сайта с нуля 2.0

Система "Вёрстка сайта с нуля 2.0" содержит в себе не только сами видеоуроки по адаптивной вёрстке сайтов с примерами, но и вспомогательную систему для более эффективного обучения.

Сам курс обучит Вас абсолютно с нуля HTML5 и CSS3, а также научит верстать сайты с помощью реальных примеров вёрстки. Обучение идёт от простого к сложному. В последнем разделе курса идёт обучение адаптивной вёрстке сайтов: Вы узнаете всю необходимую теорию, а также увидите пример реальной адаптивной вёрстки сайта.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

Ввод и последующий вывод текста
14.05.2012 21:03:07 Ввод и последующий вывод текста Сообщение #1
kalinichenkos

kalinichenkos

Новичок

Новичок

Дата регистрации:
13.04.2012 21:07:22

Сообщений: 10

Здравствуйте.
Я написал такой html код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<head>
</head>

<body>

<form>
Ввод текста:
<input type = 'text' name = 't' />
<br />
</form>

Вывод текста:
<script language="JavaScript">
document.write(t);
</script>

</body>

</html>

хотел просто ввести текст, нажать Enter, и этот текст увидеть.

Но после нажатия Enter текст из поля ввода исчезает и на экран не выводится.

Подскажите, пожалуйста, где я ошибся при попытке вывести переменную "t"?
И считается ли текст введенным если я перенес мышку из поля ввода или надо обязательно нажимать Enter?
С уважением, Сергей.
Профиль Ответить
15.05.2012 12:30:42 Ввод и последующий вывод текста Сообщение #2
brussens

brussens

Мега-мастер

Мега-мастер

Дата регистрации:
11.10.2011 22:50:07

Сообщений: 438

Помоему эти строки никогда не выведут текст, т.к. вы ничего не передаёте, т.е. никакого события не происходит.
Ваш скрипт выведет текст только при условии введения текста в самом скрипте. К сожалению не обладаю высокими знаниями по JS, т.к. использую исключительно jquery, но азы знаю, и точно могу сказать, что вам стоит ещё раз (если вы уже читали) прочитать статьи по JS на этом сайте.
Профиль Ответить
15.05.2012 12:33:08 Ввод и последующий вывод текста Сообщение #3
brussens

brussens

Мега-мастер

Мега-мастер

Дата регистрации:
11.10.2011 22:50:07

Сообщений: 438

И вообще, откуда вы взяли в скрипте переменную t???? Имя формы не является переменной. Для того, что бы что либо выводилось из формы, вам на чистом JS нужно написать не мало строк кода.
Профиль Ответить
15.05.2012 17:50:33 Ввод и последующий вывод текста Сообщение #4
kalinichenkos

kalinichenkos

Новичок

Новичок

Дата регистрации:
13.04.2012 21:07:22

Сообщений: 10

Спасибо за совет. Я то думал что "t" это имя того что я ввожу. а оказывается нет. и еще думал что событие вввода подразумевается по умолчанию. буду обрабатывать форму.
Профиль Ответить
15.05.2012 23:34:56 Ввод и последующий вывод текста Сообщение #5
brussens

brussens

Мега-мастер

Мега-мастер

Дата регистрации:
11.10.2011 22:50:07

Сообщений: 438

По мне, так проще сделать всё на jquery
Профиль Ответить
06.06.2012 21:06:50 Ввод и последующий вывод текста Сообщение #6
soffrick

soffrick

Новичок

Новичок

Дата регистрации:
11.05.2012 18:08:46

Сообщений: 14


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style>
body, html, p {
margin: 5px;
padding: 0;
}

p label {
color: silver;
font-weight: bold;
font-size: 20px;
cursor: pointer;
}

#p2 {
margin-top: 40px;
}

input[type='text'] {
width: 250px;
background-color: lightgray;
}

input[type='button'] {
background-color: gray;
color: white;
font-weight: bold;
width: 50px;
}

input[type='button']:hover {
background-color: silver;
color: black;
cursor: pointer;
}
</style>
</head>
<body>

<p><label for="input"> Ввод текста:</label></p>
<input type="text" id="input" value="Введите текст и нажмите ОК" onfocus="clearinput('input')" />
<input type="button" onclick="changetxt()" value="OK" />
<p id="p2"><label for="output"> Вывод текста:</label></p>
<input type="text" value="И он отобразиться здесь!" id="output" onfocus="clearinput('output')" />


<script>
function changetxt() {
('output').value = document.getElementById('input').value
}

function clearinput(id) {
doc = document.getElementById(id)
if((doc.value == '') || (doc.value == 'И он отобразиться здесь!') || (doc.value == 'Введите текст и нажмите ОК')) {
doc.value = ''
}
}
</script>
</body>
</html>
Профиль Ответить
07.06.2012 17:55:24 Ввод и последующий вывод текста Сообщение #7
kalinichenkos

kalinichenkos

Новичок

Новичок

Дата регистрации:
13.04.2012 21:07:22

Сообщений: 10

Здравствуйте.
Я вставил Ваш код в файл, но он не полностью работает: два тексовых поля, кнопка, оформление - все есть. но при нажатии на кнопку ничего не происходит. Для проверки сделал кусок между <script> </script> коментарием и результат тот же - все есть но вывода текста не происходит.
Профиль Ответить
08.06.2012 16:04:55 Ввод и последующий вывод текста Сообщение #8
soffrick

soffrick

Новичок

Новичок

Дата регистрации:
11.05.2012 18:08:46

Сообщений: 14

Попробуйте скрипт разместить перед </head>
Профиль Ответить
11.06.2012 14:31:51 Ввод и последующий вывод текста Сообщение #9
kalinichenkos

kalinichenkos

Новичок

Новичок

Дата регистрации:
13.04.2012 21:07:22

Сообщений: 10

Спасибо, все заработало.
Разобрался что такое document.getElementById и зачем тег id, затем в функции замены текста написал:
document.getElementById('output').value = document.getElementById('input').value
Профиль Ответить
11.06.2012 16:53:51 Ввод и последующий вывод текста Сообщение #10
soffrick

soffrick

Новичок

Новичок

Дата регистрации:
11.05.2012 18:08:46

Сообщений: 14

замена текста делается не через value, a через innerHTML


<script>
function changetext(){
document.getElementById('id_of_old_text').innerHTML = 'Новый текст для элемента, в котором может содержаться текст (h1 - h6, p, div, span, и т.д ...)'
}
</script>


А вот замена значения как раз через value



<script>
function changevalue(){
document.getElementById('id_of_old_value').value = 'Новое значение для элемента INPUT'
}
</script>
Профиль Ответить