JavaScript haz clic en el problema del evento

En mi página hay dos imágenes que son visibles inicialmente

  • uno es un gráfico rico
  • el otro es una imagen en blanco transparente

Cuando un usuario hace clic en la imagen transparente, se oculta el gráfico enriquecido. Cuando el usuario hace clic en el gráfico enriquecido, el gráfico enriquecido se oculta nuevamente.

Mi problema es que actualmente el gráfico enriquecido no se muestra después de que el usuario ha hecho clic en la imagen en blanco transparente. A continuación se muestra el código que he intentado hasta ahora.

HTML

JAVASCRIPT

 var port_change, i; window.onload = function () { port_change = document.getElementById("change").getElementsByTagName("change"); for (i = 0; i = port_change.length) { k = 0 } port_change[k].style.display = "none"; }; return r; })(i+1); } port_change[0].style.display = ""; } 

PEN : http://codepen.io/anon/pen/Hbcze ¿ Alguna idea?

Alternar la visibilidad del elemento

[…] eliminado para mantener la publicación corta – ver el historial y / o la demostración de trabajo

Actualiza para abordar algunas partes de tu código

La parte .getElementsByTagName("change") muy probablemente sea .getElementsByTagName (“img”). Algunas propiedades (pantalla) se configuraron varias veces. Así que reescribí tu código como este

 function setHideHandler() { return function () { console.log("this", this); this.style.display = "none"; }; } function setOnLoad(){ var image; var port_change = document.getElementById("change").getElementsByTagName("img"); for (i = 0; i < port_change.length; i++) { image = port_change[i]; image.style.display = ""; image.onclick = setHideHandler(); } } 

Con este html

 

Así que ahora puede ver que configuró un controlador onclick para ocultar la imagen después de haber hecho clic en ella. Después de que el usuario ha hecho clic en cualquier imagen (go t), el código oculta esta imagen. Después de hacer clic en ambas imágenes, el usuario no tiene opción de hacer clic en nada para volver a mostrar la otra imagen.

Por lo tanto, debes encontrar la manera de cruzarlos. Si el usuario hace clic en t, se muestra g y t está oculto. Ahora que g es visible, el usuario puede hacer clic en g para ocultarlo y debe volver a mostrar t.

Este es el código completo

 function showOther(el){ if(el.nextElementSibling){ sibling = el.nextElementSibling; }else if(el.previousElementSibling){ sibling = el.previousElementSibling; } sibling.style.display =''; el.style.display = 'none'; } function setHideHandler() { return function () { showOther(this); }; } function setOnLoad(){ var image; var port_change = document.getElementById("change").getElementsByTagName("img"); for (i = 0; i < port_change.length; i++) { image = port_change[i]; image.style.display = ""; image.onclick = setHideHandler(); } } 

Ejemplo de trabajo del código anterior

Otro ejemplo completamente funcional

Actualización 3 después de tu explicación

Este ejemplo muestra dos imágenes . La imagen blanca siempre está visible. Si el usuario hace clic en él, se alterna la visibilidad de la imagen en negro. Si el usuario hace clic en la imagen negra, se ocultará, vea el ejemplo aquí

Actualización 4 con respecto a su comentario en

Usted escribió: In the DOM tree i see In the DOM tree i see

  

Creo que esto va más allá de su pregunta inicial ya que proporcioné una solución de trabajo para su problema. Pero para darle algunas pistas, tiene que responder algunas preguntas

  • ¿Qué imágenes no cambian después de qué acción del usuario? ¿Por qué es esto relevante para la etiqueta noscript?
  • ¿Estás usando wordpress para crear la página de la que estamos hablando ?
  • ¿Cómo incrusta el video? ¿Crea el html a mano o usa las funciones de WordPress para incrustar video?
  • Si tiene control total sobre el código fuente y elimina algo, se mantendrá eliminado. Como dijiste que removed the node but after a page load it is there again supongo que al menos parcialmente usas una funcionalidad que no está 100% controlada por ti (similar al enlace de wordpress anterior).

Por favor, dime por qué aún no aceptaste mi respuesta.