Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Предполагается наличие объекта.

Автор: BuShaRt 20.4.2007, 10:33

Код


<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>

Помогите, найти ошибку пожалуста.

Автор: Sardar 20.4.2007, 12:18

Ну если глянешь в консоль с ошибками, то увидишь как скрипт вываливается на 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>

Автор: BuShaRt 20.4.2007, 12:34

Sardar,
:( в данном случае он выводит на экран надпись "<input type="text" name="i_tag" size="40" value="Машина">".. а нужно, чтобы в разметке страницы появился этот тег т.е. после нажатия мышкой по надписи, ее можно было отредактировать через <input type=text>

Автор: lexxICON 20.4.2007, 14:46

#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>

Автор: BuShaRt 20.4.2007, 15:34

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

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

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

Автор: lexxICON 20.4.2007, 16:15

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

parentNode - родительская нода. Просто заменяем у родителя дива его потомка - сам див. Меняем на новый элемент.

Автор: BuShaRt 24.4.2007, 13:44

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

Код


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

Код


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

Автор: Sardar 24.4.2007, 19:34

Цитата(BuShaRt @ 24.4.2007, 12:44

)

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

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

Автор: BuShaRt 25.4.2007, 12:52

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

почитал еще http://wdh.suncloud.ru/dhtml03.htm#ref431 и кажеться разобрался как работает smile

Всем спасибо smile