Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Добраться до свойств ссылки из обработчика


Автор: kaa 1.6.2006, 20:55
Вот я создаю динамически ссылку:

Код

setInterval("fUpdate()",3000);
function fUpdate()
{
  ...
  var new_link = document.createElement("a");
  col2.appendChild(new_link);
  col2.firstChild.appendChild(new_text);
  col2.firstChild.setAttribute("href","javascript:linkClick(this)");
  ...
}


и пытаюсь получить доступ к тексту между <a href> и </a> в обработчике.

Код

function linkClick(obj)
{
   var addresat = obj.innerHTML;
   alert(addresat);
}


Но вылазит undefined. Пробовал располагать скрипт между </body> и </html> - ну чтобы начинал исполняться после загрузки документа, но он у мя вроде и так начинает исполняться после загрузки через 3 секунды...

Почему не определены свойства ссылки?  smile 
 

Автор: 12345c 1.6.2006, 21:28
Всё работает, только писать надо грамотно:
Код
 <script> //setInterval(fUpdate,3000);
function fUpdate(){
  //...
  col2=document.getElementById('col_2')
  new_text=document.createTextNode("***");
  new_link = document.createElement("a");
  new_link.appendChild(new_text);
  col2.appendChild(new_link)
  col2.firstChild.setAttribute("href","javascript:linkClick(this)");
  //...

}onload=function(){fUpdate();alert(col2.firstChild.innerHTML);}
</script> 
<div id=col_2></div>


Добавлено @ 21:29 
(К примеру, не "вылазит", а "вылезает".) 

Автор: kaa 1.6.2006, 22:30
Прастите, наверное зря я невыложил весь скрипт, во первых троеточие я добавил чтобы не писать весь текст скрипта, во вторых объект  col2 также создаётся динамически... И в третьих зачем комментировать функцию 
Код

setInterval(fUpdate,3000)


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

Вот полный текст скрипта, фактически он формирует весь контент, изначально страница пустая.

Код

<html>
<head>
</head>



<script language="javascript">
    setInterval("fUpdate()",3000);
    var parent_window = window.parent;
    var frame_info = parent_window.frame5.document;
    
    
    
    function fUpdate()
    {
        
        var m_update = frame_info.getElementById("AddDelUserNew");
        if(m_update.firstChild.nodeValue=="y")
        {        
                
            var add_user = frame_info.getElementById("AddUser");
            if(add_user.hasChildNodes())
            {
                var child_amount = add_user.childNodes.length;
                
                for(var i=0; i<=child_amount-1; i++)
                {
                    if(add_user.childNodes[i].nodeType == 1)
                    {
                        var temp = add_user.childNodes[i].firstChild.nodeValue;
                        var m_f = add_user.childNodes[i].lastChild.firstChild.nodeValue;
                        var tableNode = document.childNodes[0].childNodes[1].firstChild; 
                        var new_tr = document.createElement("tr");
                        var new_td = document.createElement("td");
                        var new_td1 = document.createElement("td");
                        var new_tbody = document.createElement("tbody");
                        var new_img = document.createElement("img");
                        var new_link = document.createElement("a");
                        var new_text = document.createTextNode(temp);
                        
                        tableNode.appendChild(new_tbody);
                        tableNode.firstChild.appendChild(new_tr);
                        
                        tableNode.firstChild.lastChild.setAttribute("id",temp.concat("_str"));
                        
                        tableNode.firstChild.lastChild.appendChild(new_td);
                        tableNode.firstChild.lastChild.appendChild(new_td1);
                        var col1 = tableNode.firstChild.lastChild.firstChild;
                        var col2 = tableNode.firstChild.lastChild.lastChild;
                        col1.appendChild(new_img);
                        if(m_f=="m")
                        {
                            col1.firstChild.setAttribute("src","male.png");
                        }
                        else
                        {
                            col1.firstChild.setAttribute("src","female.png");
                        }
                        
                        col1.setAttribute("height","20");
                        
                        col1.setAttribute("width","20%");
                        
                        col2.setAttribute("width","80%");
                        col2.appendChild(new_link);
                        col2.firstChild.appendChild(new_text);
                        col2.firstChild.setAttribute("href","javascript:linkClick(this)");
                    }
                }
                
            }
            
            
            var del_user = frame_info.getElementById("DelUser");
            if(del_user.hasChildNodes())
            {
                var child_amount = del_user.childNodes.length;
                for(var i=0; i<=child_amount-1; i++)
                {
                    if(del_user.childNodes[i].nodeType == 1)
                    {
                        var temp = del_user.childNodes[i].firstChild.nodeValue;
                                                                        var deleting_str = document.getElementById(temp);
                        var parent_node = deleting_str.parentNode;
                        parent_node.removeChild(deleting_str);                        
                    }    
                }
            }
            
            
            m_update.firstChild.nodeValue="n";
        }            
    }
    
    
    
    function linkClick(obj)
    {
        
        var addresat = obj.innerHTML;
        alert(addresat);
    }
    
</script>





<body bgcolor="#FD5433" style="padding:0; margin:0;">
    <table border="1%" width="100%" style="padding:0; margin:0;">
    </table>
</body>

</html>


ВОТТТ! 

Автор: Messenger 2.6.2006, 12:16
Код

col2.firstChild.setAttribute("href","javascript:linkClick(this)");

this это window обьект.
Код

function linkClick(obj)
    {
        //var addresat = obj.innerHTML;
        alert("Info: " + obj + " " + obj.innerHTML); // очень хорошо видно в  FF
    }

можно идти через onclick
Код

col2.firstChild.onclick = linkClick;
...
function linkClick(evt)
{
  if(evt != null) // NN-FF
  {alert("Info: " + evt.target.innerHTML);}
  else // IE
  {alert("Info:" + event.srcElement.innerHTML);}
}
 

Автор: 12345c 2.6.2006, 12:40
Цитата(kaa @  1.6.2006,  22:30 Найти цитируемый пост)
Мне нужно чтобы скрипт обновлял информацию через определённый промежуток времени
Тогда её ставить в onload.

Можно и с пустого документа строить структуру, тогда корнем будет document.body или document.documentElement (если Doctype). Если что-то не идёт, значит, ошибка в скрипте.

Показывать весь код, конечно, надо было сразу, т.к. речь об ошибке. 

Автор: kaa 2.6.2006, 22:39
Спасибо за ответы, извиняюсь за долгое отсутствие, щас попрпобую... 

Автор: kaa 2.6.2006, 23:35
12345c,  Поставил в онлоад, всё работает также... 
Не просвятишь почему именно в онлоад нада ставить а не просто оставлять как у меня? Ведь работало же...

Добавлено @ 23:42 
Messenger, 

Код

alert("Info:" + event.srcElement.innerHTML);


Неработает, гаварит необходим объект! 

Автор: 12345c 3.6.2006, 00:15
Очень просто, потому что onload - это событие по сформированию документа, когда гарантированно существуют объекты его. (Но могут не успеть прорисоваться картинки и прочие недочёты.) Любая задержка не гарантирует существование структуры документа. 

Автор: Messenger 3.6.2006, 09:46
kaa, примерно так:
Код

<html>
<head>
</head>
<body>
<script language="javascript">
var k = 0;
function fUpdate(){
  //...
    k++;
  col2=document.getElementById('col_2')
  new_text=document.createTextNode("*** " + k);
  new_link = document.createElement("a");
  new_link.appendChild(new_text);
  col2.appendChild(new_link);
    col2.appendChild(document.createElement("br"));
    new_link.onclick = linkClick;
    new_link.setAttribute("href", "http://www.google.ru");
  //...
}onload=function(){setInterval("fUpdate()", 3000);}
function linkClick(obj)//  может достаточно лиш задать аттрибут target для ссылки?
{
    if(obj != null)
    {
      alert("Info NN: " + obj + " " + obj.target.innerHTML + " " + obj.target.href);
        obj.stopPropagation();
        return false;
    }
    else
    {
      alert("Info IE: " + event + " " + event.srcElement.innerHTML + event.srcElement.href);
        event.returnValue = false; 
//parent.someFrame.location.href = someHrefChanger(event.srcElement.href);
    }
}
</script> 
<div id=col_2></div>

</body>
</html>
 

Автор: kaa 3.6.2006, 19:47
Messenger, target не пойдёт - он мне ваабще не пришей кобыле хвост. Мне нужно обработать текст ссылки и впихнуть в другой фрейм.. .Не target здесь ненужен... Ща примерчик  твой разберу... 

Автор: kaa 4.6.2006, 21:02
Так, всё... Глухо как в танке... Ничё невыходит..  Важе реально прописать обработчик объекту в процессе его создания и потом получить в обработчике доступ ко всем его свойствам?

Ведь обработчик-то вызывается! Тока объект передаётся ему чёрти знает какой! Что-то передаётся а что непонятно  smile   smile   smile  

Автор: Messenger 5.6.2006, 09:43
Я уже писал, что если:
Цитата

//col2.firstChild.setAttribute("href","javascript:linkClick(this)");
new_link.setAttribute("href", "javascript:linkClick(this)");

то передаётся window обьект (аргумент this в linkClick).
А если напишеш так:
Код

{
new_link.onclick = linkClick;
new_link.setAttribute("href", "http://www.online.ru");
...
}
function linkClick(obj)
{
...
}

то в linkClick в ИЕ ничего не будеть переданно (всё идёт через обьект [window.]event), а в Nescape Navigator (firefox) будет передан event обьект, как первый аргумент.
 

Автор: 12345c 5.6.2006, 17:44
Цитата(kaa @  4.6.2006,  21:02 Найти цитируемый пост)
реально прописать обработчик объекту в процессе его создания и потом получить в обработчике доступ ко всем его свойствам?
 Реально, только много мест, где ошибиться можно, аккуратно надо писать, проверяйте себя тестовыми скриптами (вставками) на каждом трудном месте. В частности, при прописывании все объекты должны существовать, особенно документ smile.
 

Автор: kaa 5.6.2006, 23:34
Messenger, 
Гм, разрешите дилетантский вопрос...
Я в общем знал о таком методе задания обработчика как

n
Код

ew_link.onclick = linkClick;


Но я читал что он не примеим когда в функцию обработчик необходимо передавать параметры! Неужто параметр передаётся автоматом! Объсните пажалста  smile 
 

Автор: kaa 6.6.2006, 00:45
Messenger, И еще один вапрос: какой адрес нада ставить в ссылку чтобы она никуда не перекидывала, только тупо посылала сообщение о событии и вызывала обработчик? 

Код

new_link.onclick = linkClick;


обработчик неработает вообще

Попробовал так 

Код

new_link.onclick = linkClick();


Обработчик срабатывает только при формировании страницы и дальше опять не реагирует на нажание ссылки...
 Кстати в ссылке href="#"... Вот 

Автор: Messenger 6.6.2006, 10:10
Цитата

Но я читал что он не примеим когда в функцию обработчик необходимо передавать параметры! Неужто параметр передаётся автоматом! Объсните пажалста 

По поводу аргументов:
Код

function getArgs(one, two)
{
  var t = "Arguments:<br>";
    for(var i = 0; i < arguments.length; i++)
      t += arguments[i] + "<br>";
    t += "The function arguments by name:<br>" + one + ", " + two + "<br>";
    return t;
}
function funcArgs()
{
  info.innerHTML = getArgs("one", "WWW", new Date(), 44, 55) + "<br>" + getArgs("two") + 
    "<br>" + getArgs();
    var refGetArgs = getArgs;
    info.innerHTML += refGetArgs("refGetArgs") + "<br>" + refGetArgs(new Date(), "a", "b");
}

Когда срабатывает onclick событие, то функция типа fireOnClick передаёт функций linkClick всё, что пологается (для ФФ одно, для ИЕ другое). Если ничего не передаётся, то аргументы функций равны null (т.е. undefined), arguments.length == 0.
new_link.onclick = linkClick(); // просто вызывает функцию и присваевает .onclick то, что возвращает linkClick.
А что, пример http://forum.vingrad.ru/index.php?showtopic=98760&view=findpost&p=751907 не работает?

Да, функция linkClick должна быть в том же документе(окне), где и new_link.
Не видя всего кода сложно сказать что то больше, почему неработает. 

Автор: kaa 8.6.2006, 00:47
Messenger, Не, неработает, опять треюует объект... Я правда убрал условие на проверку навигатора ибо отрабатываю тока на IE.
Щаз буду разбираться с вашим последним примером. 

Автор: Messenger 8.6.2006, 08:57
kaa, зачем убирать проверку? Скопировал, записал в файл и запустил, всё.
Цитата

Да, функция linkClick должна быть в том же документе(окне), где и new_link.

Т.е. обработщик (linkClick) события (/new_link./onclick) должен быть в том же документе (window, frame) где и происходит событие (т.е. там, где находится new_link), иначе [window.]event обьект будет не доступен, так, как событие будет происходит в другом документе, нежели обрабатывается. Это пишу потому, что у тебя там с frame'ами намудрено.
Зделай минимальный пример, чтоб неработал, и покажи, тогда будеть можно сказать, что то более определённое. 

Автор: kaa 8.6.2006, 16:17
Messenger, OK, Я выложк тогда фреймовую структуру и два фрейма - пятый с инфой и третий(это тот который вот неработает). Остальные всйравно пока пустые - недоделанные. Посмотри пожалста как время будет. 

Автор: Messenger 9.6.2006, 10:00
Цитата

Я выложк тогда фреймовую структуру и два фрейма 

Лично я видел только один фрейм.
Вот, что у меня получилось:
frame_update.html:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<script language="javascript" type="text/javascript">
    onload=function(){setInterval("fUpdate()",3000);};
    var parent_window = window.parent;
    var frame_info = parent_window.frame5.document;
        
        function gbi(doc, name){return doc.getElementById(name);}// 
        
    function fUpdate()
    {
        //var m_update = frame_info.getElementById("AddDelUserNew");
                var add = gbi(frame_info, "add");
        //if(m_update.firstChild.nodeValue=="y")
                if(add.value == "y")
        {        
            /*var add_user = frame_info.getElementById("AddUser");
            if(add_user.hasChildNodes())
            {
                var child_amount = add_user.childNodes.length;
                for(var i=0; i<=child_amount-1; i++)
                {
                    if(add_user.childNodes[i].nodeType == 1)
                    {*/
                        //var temp = add_user.childNodes[i].firstChild.nodeValue;
                                                var temp = gbi(frame_info, "address").value;
                        //var m_f = add_user.childNodes[i].lastChild.firstChild.nodeValue;
                                                var m_f = gbi(frame_info, "gender").value;
                        //var tableNode = document.childNodes[0].childNodes[1].firstChild; // это у меня не работает.
                                                var tableNode = gbi(document, "theTable");
                        var new_tr = document.createElement("tr");
                        var new_td = document.createElement("td");
                        var new_td1 = document.createElement("td");
                        var new_tbody = document.createElement("tbody");
                        var new_img = document.createElement("img");
                        var new_link = document.createElement("a");
                        var new_text = document.createTextNode(temp);
                        
                        tableNode.appendChild(new_tbody);
                        tableNode.firstChild.appendChild(new_tr);
                        
                        tableNode.firstChild.lastChild.setAttribute("id",temp.concat("_str"));
                        
                        tableNode.firstChild.lastChild.appendChild(new_td);
                        tableNode.firstChild.lastChild.appendChild(new_td1);
                        var col1 = tableNode.firstChild.lastChild.firstChild;
                        var col2 = tableNode.firstChild.lastChild.lastChild;
                        col1.appendChild(new_img);
                        if(m_f=="m")
                        {
                            col1.firstChild.setAttribute("src","male.png");
                        }
                        else
                        {
                            col1.firstChild.setAttribute("src","female.png");
                        }
                        
                        col1.setAttribute("height","20");
                        
                        col1.setAttribute("width","20%");
                        
                        col2.setAttribute("width","80%");
                        col2.appendChild(new_link);
                        col2.firstChild.appendChild(new_text);
                        col2.firstChild.setAttribute("href","#");
                                                new_link.onclick=linkClick;
                    /*}
                }
                
            }*/
            /*var del_user = frame_info.getElementById("DelUser");
            if(del_user.hasChildNodes())
            {
                var child_amount = del_user.childNodes.length;
                for(var i=0; i<=child_amount-1; i++)
                {
                    if(del_user.childNodes[i].nodeType == 1)
                    {
                        var temp = del_user.childNodes[i].firstChild.nodeValue;
                                                                        var deleting_str = document.getElementById(temp);
                        var parent_node = deleting_str.parentNode;
                        parent_node.removeChild(deleting_str);                        
                    }    
                }
            }*/
            //m_update.firstChild.nodeValue="n";
                        add.value = "n";
        }else{}            
    }
    
    
    
    function linkClick(obj)
    {
        if(obj)// NN, FF
                {
                  alert(obj.target.innerHTML);
                    return;
                }// IE
        var addresat = event.srcElement.innerHTML;
        alert(addresat);
    }
    
</script>
    <title></title>
  </head>
  <body bgcolor="#FFFFFF" style="padding:0; margin:0;">
    <table id="theTable" border="1%" width="100%" style="padding:0; margin:0;"></table>
  </body>
</html>


frame_info.html:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
  <head>
    <title></title>
  </head>
  <body>
        <div id="AddDelUserNew">
          Add???<br>
            <input id="add" type="text" value="y" />
        </div>
        <div id="AddUser">Address<br>
            <input id="address" type="text" value="Cool Cat" /><br>Gender<br>
            <input id="gender" type="text" value="m" />
        </div>
  </body>
</html>

index.html:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
  <head>
    <title></title>
  </head>
  <frameset cols="25%, *">
    <frame name="frame5" id="frame5" src="frame_info.html">
    <frame name="frameUpdate" id="frameUpdate" src="frame_update.html">
  </frameset>
</html>


И еще, повторюсь, без всего кода, трудно сказать, что там не работает. 

Автор: kaa 9.6.2006, 22:59
Чёрт,  умя чтобы эти прмеры понять образования нехватает...  smile  

Автор: kaa 9.6.2006, 23:14
Чёрт,  умя чтобы эти прмеры понять образования нехватает...  smile 
Я начинаю уже в своём коде путаться...

А давайте разберём что-нить попроще. Вот допустим пример всей сути проблемы: создаётся ссылка и надо в обработчике вывести текст ссылки. 


Код

<html>
<head>
</head>

<script language="javascript">
function tt()
{
 m_link = document.createElement("a");
 m_text = document.createTextNode("LINK");
 m_link.appendChild(m_text);
 
 link_node = document.firstChild.childNodes[1].appendChild(m_link);
 link_node.setAttribute("href", "javascript:void(0)");
 link_node.onClick = linkClick;
 
 
 function linkClick()
 {
    alert(event.srcElement.innerHTML);
 }
  
}
</script>

<body onLoad="tt()">
</body>
</html>



Неработает кароче обработчик, не ругается и неработает.
Я думаю этот код и поменьше и попроще, а то я уже кипеть начинаю... smile  

Автор: Messenger 10.6.2006, 10:08
Код

  //link_node.onClick = linkClick;
  link_node.onclick = linkClick;

Как понимаеш, onClick это ведь не onclick. В html tag'ах можеш писать как удобнее (но и сдесь луче придерживатся стандарта), в ЯваСкрипте, как и в Ц/Ц++ надо следить за регистрами букв.  

Автор: kaa 10.6.2006, 13:10
Messenger, А вот этого незнал! Спасибо, ща еще поколдую...  smile  

Автор: kaa 10.6.2006, 14:05
Messenger, СПАСИБА! всё заработало: и в упрощенном примере и в основном документе... smile 

Немного оффтопа: а где можно почитать более подробно про объект event, а то у меня три книги  и нигде про него нечего толкового не написано... Пишут тока что он создаётся и всё... Из-за отсутствия инфы по нему и погорел smile   

Автор: Messenger 10.6.2006, 14:42
Справочная информация - http://forum.vingrad.ru/index.php?showtopic=19939&view=findpost&p=686148
и пройдись в http://forum.vingrad.ru/index.php?showforum=10 по важным темам, а также ползуйся поиском в форуме.  smile  

Автор: kaa 10.6.2006, 16:32
Ага, спасибо еще раз 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)