Cómo cambiar el texto interno de <a> usando javascript

Question

Cuando hago clic en el enlace "mostrar detalles" debería cambiar a "ocultar detalles". He probado el siguiente código, pero que no está funcionando:

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

El problema es que this en su atributo href no apunta al ancla. Podría pasar un identificador allí y dar el elemento de anclaje identificado como el atributo id; y luego use document.getElementById para obtener el anclaje.

Ejemplo:

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 es uno de esos meticuloso del navegador que se denominan de manera diferente en diferentes navegadores. Si acaba de empezar con javascript Yo recomiendo usar un marco como jQuery porque es mucho más fácil de llamar a una función como:

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

de lo que es conseguir que cada variante navegador configurado correctamente. El marco hace todo eso por ti.

Answer 3

Los detalles en su pregunta son escasos. Aquí hay algunas posibilidades:

Quitar parent. desde el controlador de línea, y el cambio a una onclick:

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

Tal vez la función showHideDetails() no es global

Quizás innerText no está soportada en el navegador que estás usando Pruebe innerHTML en su lugar.

obj.innerHTML = 'hide details'; 

Answer 4

this apuntará a la ventana de DOM y no la etiqueta <a>. Entonces use el atributo onclick para ejecutar.

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