Jak zmienić tekst wewnętrzny <a> przy użyciu javascript

Question

Po kliknięciu linku "pokaż szczegóły" powinien on zostać zmieniony na "ukryj szczegóły". Próbowałem poniższy kod, ale to nie działa:

out.print("<a href=\"javascript:parent.showHideDetails('"+id+"',this);\">show details</a>"); 

function showHideDetails(id,obj) { 
    try 
    { 

     alert(obj.innerText); 
     obj.innerText = 'hide details'; 
    } 
    catch (err) 
    { 
     alert(err); 
    } 

} 

Answer 1

Problemem jest to, że this w atrybucie href nie wskazuje na kotwicy. Możesz przekazać tam identyfikator i nadać elementowi kotwiącemu ten sam identyfikator, co atrybut id; a następnie użyj document.getElementById, aby uzyskać zakotwiczenie.

przykład:

out.print("<a href=\"javascript:parent.showHideDetails('"+id+"','anchor_1');\" id=\"anchor_1\">show details</a>"); 

function showHideDetails(id,identifier) { 
    try 
    { 
     var obj = document.getElementById(identifier); 
     alert(obj.innerText); 
     obj.innerText = 'hide details'; 
    } 
    catch (err) 
    { 
     alert(err); 
    } 
} 

Answer 2

innerText jest jedną z tych przeglądarek wybrednych te, które są nazwane różnie w różnych przeglądarkach. Jeśli dopiero zaczynasz z javascript polecam za pomocą ramy jak jQuery bo to znacznie prostsze do wywołania funkcji, takich jak:

$('#linkID').text('show'); 

niż jest, aby każdy wariant przeglądarki prawidłowo ustawiony. Ramy to wszystko dla ciebie.

Answer 3

Szczegóły podane w pytaniu są nieliczne. Oto kilka możliwości:

Usuń parent. z obsługi inline i zmień go do onclick:

"<a href=\"#\" onclick=\"javascript:showHideDetails('"+id+"',this);\">show details</a>" 

Być może funkcja showHideDetails() nie jest globalne

Może innerText nie jest obsługiwany przeglądarka, której używasz. Zamiast tego spróbuj innerHTML.

obj.innerHTML = 'hide details'; 

Answer 4

this wskaże DOM oknie, a nie znaczników <a>. Użyj więc atrybutu onclick, aby wykonać.

out.print("<a href=\"#\" onclick=\"showHideDetails('"+id+"',this);\"> 
show details</a>");