Форум

deerstop · #1 (**permalink**) 24.09.2009, 11:06

Ситуация:
Есть html-документ, состоящий из маленькой формы - текстовое поле, две радиокнопки, две кнопки (ок и reset). По нажатию на ок запускается функция (во внешнем файле), которая проделывает некоторые операции с текстовым полем и возвращает результат в виде набора строк. Проблема в том, что этот набор строк возникает перегрузкой страницы, а мне хотелось бы, чтобы результат помещался на текущей странице после формы.

У меня есть ощущение, что решение у задачи простое, но поскольку я в этой области новичок, самостоятельный поиск пока результата не дал. Буду благодарен, если кто-то подскажет решение.

Gvozd · #2 (**permalink**) 24.09.2009, 11:20

http://javascript.ru/tutorial/dom

deerstop · #3 (**permalink**) 24.09.2009, 13:09

Спасибо большое.
Я бегло пробежался (подробно пока нет времени читать) - вроде увидел, где подобные вещи показываются.

deerstop · #4 (**permalink**) 24.09.2009, 22:01

Что-то ничего не получается, видимо не догоняю где-то:

Документ:

<head>
	<title>Пример</title>
	<script type="text/javascript" src="script.js"></script>
	<style type="text/css">
	.radio {
    margin-top: 10;
}
	.button {
    margin-top: 10;
	margin-right: 15;
	padding: 0 15 0 15;
    width: auto;
    overflow: visible;
}
	</style>
</head>

<body>
<form name="form1">
<input type="text" name="sentence" size="200"><br>
<input type="radio" name="direction" value="начало" checked="true" class="radio">Начало<br>
<input type="radio" name="direction" value="конец">Конец<br>
<input type="submit" name="ok" value="Ok" class="button" onclick="parse();">
<input type="reset" name="ok" value="Отмена" onclick="document.forms.form1.reset()">
</form>

<p>Результат выполнения:<p>

<hr>
</body>

Скрипт:

function parse () {
var hr = document.getElementByTagName('hr');
var p = document.getElementsByTagName('p')[0];
var newElem = document.createElement('p');
newElem = 'Новый элемент';
hr.insertBefore(newElem, p);
}

Вроде все как указано делаю, но результата нет - новый абзац не добавляется. Может кто-нибудь подсказать, где ошибка?

deerstop · #5 (**permalink**) 24.09.2009, 22:06

Скрипт немного неверно скопировал:

function parse () {
var hr = document.getElementByTagName('hr');
var p = document.getElementsByTagName('p')[0];
var newElem = document.createElement('p');
newElem.innerHTML = 'Новый элемент';
hr.insertBefore(newElem, p);
}

Octane · #6 (**permalink**) 24.09.2009, 22:23

С <hr> непонятно что вы пытаетесь сделать, метода getElementByTagName не существует, сами же в следующей строчке написали правильный вариант.

function parse () {
    var p = document.getElementsByTagName('p')[0];
    var newElem = document.createElement('p');
    newElem.innerHTML = 'Новый элемент';
    p.parentNode.insertBefore(newElem, p);
}

Gvozd · #7 (**permalink**) 24.09.2009, 22:30

Сообщение от deerstop

var hr = document.getElementByTagName('hr');
var p = document.getElementsByTagName('p')[0];

всматриваться до полного просветления
[spoiler]вы забыли указать индекс для первого списка элементов[/spoiler]
это раз

Сообщение от deerstop

hr.insertBefore(newElem, p);

может все-таки

//если вы хотите поставить перед чертой(черта <hr> не может иметь потомков)
hr.parentNode.insertBefore(newElem, hr);

PS не успел немного

deerstop · #8 (**permalink**) 24.09.2009, 22:35

Переписал функцию Вашим вариантом. Мне понятно, как она работает, но строка по прежнему не добавляется (в firefox она как бы добавляется, но тут же исчезает).

Gvozd · #9 (**permalink**) 24.09.2009, 22:49

onclick="parse();"
меняем на
onclick="parse();return false;"
таким образом избавляемся от стандартного обработчика события

deerstop · #10 (**permalink**) 24.09.2009, 23:03

Работает!
Спасибо огромное всем!!!
С такой конструкцией вызова функции раньше не сталкивался, не совсем понимаю принцип работы, и это печально. Если не надоел еще, может объясните вкратце. Если надоел - сам постараюсь найти.
В любом случае всем еще раз огромное спасибо.

Форум

Справочник

Discord чат

Курсы javascript