Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Предполагается наличие объекта. 
V
    Опции темы
BuShaRt
Дата 20.4.2007, 10:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1391
Регистрация: 29.6.2006

Репутация: нет
Всего: 6



Код

<html><head><title>Функция write</title>
<script>
function trans(text) {
    var sh_input = '<input type="text" name="i_tag" size="40" value="'.text.'">';
    tag.innerText = sh_input;               
}
</script>        
</head><body>
<div id="tag" name="tag" onclick="trans(tag.innerText);">Машина</div>

</body></html>


 smile Помогите, найти ошибку пожалуста.
PM MAIL   Вверх
Sardar
Дата 20.4.2007, 12:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Ну если глянешь в консоль с ошибками, то увидишь как скрипт вываливается на 4 строчке. Конкатенация строк выполняется через +, хотя с операцией суммы чисел не имеет ничего общего (минус дизайна JS). Сам код не очень, попробуй так:

Код

<script type="text/javascript">
function trans(obj) {
    var text = obj.textContent? obj.textContent: obj.innerText; //innerText - IE; textContent - W3C compilant
    var sh_input = '<input type="text" name="i_tag" size="40" value="' + text + '">';
    obj.innerHTML = "";
    obj.appendChild(document.createTextNode(sh_input));               
}
</script>
<div onclick="trans(this);">Машина</div>



--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
BuShaRt
Дата 20.4.2007, 12:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1391
Регистрация: 29.6.2006

Репутация: нет
Всего: 6



Sardar
:( в данном случае он выводит на экран надпись "<input type="text" name="i_tag" size="40" value="Машина">".. а нужно, чтобы в разметке страницы появился этот тег т.е. после нажатия мышкой по надписи, ее можно было отредактировать через <input type=text>
PM MAIL   Вверх
lexxICON
Дата 20.4.2007, 14:46 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 28
Регистрация: 27.1.2007

Репутация: 2
Всего: 2



#1,#2 - кроссбраузерно, #3 - ie
#1 - input засовывается внутрь существующего дива, в #2 - див заменяется на инпут

Код

<html><head><title>Функция write</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
    
//#1
function trans(el) {
    el.innerHTML = el.getAttribute("transed") ? el.innerHTML : '<input type="text" name="i_tag" size="40" value="'+el.innerHTML+'">';
    el.setAttribute("transed","ok");
}
//#2
document.onclick = function (e) {
    e = e || window.event;
    var el = e.target || e.srcElement;
    if (!el.getAttribute("trans")) { 
        return true;
    }
    var input = document.createElement("input");
    input.setAttribute("type","text");
    input.setAttribute("name","i_tag");
    input.setAttribute("size","40");
    input.setAttribute("value", el.textContent || el.innerText);
    el.parentNode.replaceChild(input,el);
};
//#3
function trans2(el) {
    el.outerHTML = '<input type="text" name="i_tag" size="40" value="'+el.innerHTML+'">';
}
</script></head><body>

<div onclick="trans(this);">Машина#1</div>
<div trans="1">Машина#2</div>
<div onclick="trans2(this);">Машина#3</div>

</body></html>

PM   Вверх
BuShaRt
Дата 20.4.2007, 15:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1391
Регистрация: 29.6.2006

Репутация: нет
Всего: 6



lexxICON
Спасибо, но возникла пара вопросов...

getAttribute("transed")
getAttribute("trans")
Что это за атрибуты?

el.parentNode.replaceChild(input,el);
Что это за метод replaceChild и что за объект parentNode?

PM MAIL   Вверх
lexxICON
Дата 20.4.2007, 16:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 28
Регистрация: 27.1.2007

Репутация: 2
Всего: 2



BuShaRt
trans - помечаем "трансформобильные" элементы. По-моему удобно. Привел как пример разводки кода js и html.
transed - помечаем, чтобы повторно элемент не трансформировался - попробуй убрать - увидишь, что в рекурсию уйдет

parentNode - родительская нода. Просто заменяем у родителя дива его потомка - сам див. Меняем на новый элемент.
PM   Вверх
BuShaRt
Дата 24.4.2007, 13:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1391
Регистрация: 29.6.2006

Репутация: нет
Всего: 6



А почему бы вот этот кусочик не изобразить по другому? 
Код

document.onclick = function (e) {
    e = e || window.event;


Код

document.onclick = function () {
    e = window.event;



PM MAIL   Вверх
Sardar
Дата 24.4.2007, 19:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Цитата(BuShaRt @  24.4.2007,  12:44 Найти цитируемый пост)
А почему бы вот этот кусочик не изобразить по другому? 

Потому что это не одно и то же. Во всех браузерах (также согласно W3C DOM Event) кроме ИЕ объект событие передаётся первым параметром. В ИЕ существует window.event. Выражение e = e || window.event; выбирает правильный объект события.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
BuShaRt
Дата 25.4.2007, 12:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1391
Регистрация: 29.6.2006

Репутация: нет
Всего: 6



Sardar
ну, я убирал, тестил на Opera и IE - все нормально работало, но доверюсь советам профессионлов, надо так надо smile

почитал еще тут и кажеться разобрался как работает smile

Всем спасибо  smile 
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.1211 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.