onclick no me permite configurar la pantalla div como oculta y otra en línea, en línea funciona una vez cuando está oculta comentada

Intenté buscar esto en Google y aquí, pero no aparece nada parecido al problema que tengo, así que estoy bastante seguro de que este no es un tema duplicado.

Tengo 3 divs. Estoy tratando de ocultar 2 y mostrar uno usando JavaScript. No debería ser complicado ya que lo he hecho muchas veces antes, pero me está volviendo loco.

A continuación se muestra mi diseño div:

<div id="top_scorer">
   <span id="top_scores_menu">
      <a onclick='getTopPlayer("top_mens")'>Men's</a>
      <a onclick='getTopPlayer("top_womens_2nd")'>Women's 1st</a>
      <a onclick='getTopPlayer("top_womens_1st")'>Women's 2nd</a>
   </span>

   <div id="top_mens" class="topPlayer">
      <? echo $mens_top_scorers; ?>
   </div>
   <div id="top_womens_1st" class="topPlayer" style="display: none ;">
      <? echo $womens_1st_top_scorer; ?>
   </div>
   <div id="top_womens_2nd" class="topPlayer" style="display: none ;">
      <? echo $womens_2nd_top_scorer; ?>
   </div>
</div>

Y este es el JavaScript simple que estoy tratando de usar:

function getTopPlayer(WhoToShow){
    //alert(WhoToShow);
    document.getElementsByTagName('topPlayer').style.display='none';
    document.getElementById(WhoToShow).style.display='inline';

}

Lo extraño es que si comento todo dentro de la función excepto la alerta, funciona como se esperaba todo el tiempo, si comento todo excepto el document.getElementById(WhoToShow).style.display='inline' Funciona UNA VEZ y luego no se puede hacer clic en los enlaces, si dejo el document.getElementById(WhoToShow).style.display='inline'; sin comentar no funciona en absoluto.

Ahora lo he intentado de muchas maneras diferentes. Originalmente, estaba tratando de usar lo siguiente:

function getTopPlayer(WhoToShow, hide1, hide2){
    document.getElementById(hide1).style.display="none";
    document.getElementById(hide2).style.display="none";
    document.getElementById(WhoToShow).style.display="inline";
}

Esto funciona perfectamente en el primer clic y luego se observa en cualquier otro clic. La única otra cosa que se me ocurre que puede tener un efecto es que el código php simplemente hace eco de un iframe de gráfico de Google Doc publicado, a menos que haya pasado por alto estúpidamente algo ridículo.

Este es un ejemplo del script iframe de google doc repetido por el php:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js">
{
    "dataSourceUrl": "//docs.google.com/spreadsheet/tq?key=0AmOgECNc58wCdFJzUVkyMmJ1dTBqXzVuQmxlc3F0UkE&transpose=1&headers=1&range=A1%3AB100&gid=1&pub=1",
    "options": {
        "vAxes": {
            "1": {
                "useFormatFromData": true
            },
            "0": {
                "useFormatFromData": true
            }
        },
        "title": "Womens 2nd Team",
        "booleanRole": "certainty",
        "animation": {
            "duration": 0
        },
        "hAxis": {
            "title": "Number of Goals",
            "useFormatFromData": true,
            "viewWindowMode": "pretty",
            "viewWindow": {}
        },
        "isStacked": false,
        "width": 600,
        "height": 371
    },
    "state": {},
    "chartType": "BarChart",
    "chartName": "Chart 3"
}

Realmente agradecería cualquier ayuda o consejo que alguien pueda ofrecer, ya que estoy listo para descargar mi frustración en mi computadora portátil.

Resuelto (un poco)

así que pude rastrear el origen del problema en el script generado por Google, reemplacé el script del gráfico interactivo con el gráfico de imagen y funcionó como se esperaba. Desafortunadamente, no pude hacer que funcionara con los gráficos interactivos.

preguntado el 10 de septiembre de 12 a las 22:09

3 Respuestas

Usaste getElementsByTagName en lugar de getElementsByClassName. Y devuelve una matriz de elementos que necesitamos recorrer.

HTML

<div id="top_scorer">
   <span id="top_scores_menu">
      <a href="#" onclick='getTopPlayer("top_mens");return false;'>Men's</a>
      <a href="#" onclick='getTopPlayer("top_womens_1st");return false;'>Women's 1st</a>
      <a href="#" onclick='getTopPlayer("top_womens_2nd");return false;'>Women's 2nd</a>
   </span>

   <div id="top_mens" class="topPlayer">
      mens top
   </div>
   <div id="top_womens_1st" class="topPlayer" style="display: none ;">
      womens 1st
   </div>
   <div id="top_womens_2nd" class="topPlayer" style="display: none ;">
     womens 2nd
   </div>
</div>​

Javascript

var getTopPlayer = function(WhoToShow){
    var tp = document.getElementsByClassName('topPlayer');
    for(var i = 0; i < tp.length; i++){
        tp[i].style.display='none'
    }
    document.getElementById(WhoToShow).style.display='block';
}​

ACTUALIZACIÓN

Obtuve la información de que getElementsByClassName no funciona en IE < 9 en una respuesta similar que hice, así que agregué un código en esa respuesta que también podría ayudar a esta.

Vea https://stackoverflow.com/a/12386152/600101

contestado el 23 de mayo de 17 a las 13:05

Edité el script solo un poco y lo eliminé. wts ya que era un remanente de debug. - Henrik Ammer

Gracias por la sugerencia, Henrik, pero me temo que eso no tuvo ningún efecto. ¿Podría preguntar cuál es el propósito del retorno falso y por qué asignó la función a un var en lugar de simplemente llamarlo? - Jonnie

Ese código funcionó como un encanto para mí en el escenario anterior, jsviolín. Si funciona allí pero no en su código, tiene otros problemas en su código. Al igual que el javascript de gráfico que genera desde PHP. Primero llamas al .js archivo y en el mismo <script> bloque comienza con un {. No hay llamada de función o nada. Con respecto a return false, observé que el <a> la etiqueta no estaba usando href y por lo tanto no era válido. tan agregado # pero luego el onclick necesita return false no llamar a la href. y con respecto var getTopPlayer = function es más una preferencia. - Henrik Ammer

Así que llegué a la conclusión de que se trata de un problema con el script de Google. No escribí esto porque fue generado por las hojas de cálculo de Google. No pude resolverlo con el gráfico interactivo, así que solo usé la versión de imagen y funciona bien. En cuanto a {'s Nunca antes sembré ni usé ningún script js como este, así que tampoco lo entendí. Gracias por la ayuda Henrik - Jonnie

De nada y contento de haber encontrado una solución con la versión de imagen. ¡Buena suerte en el proyecto! - Henrik Ammer

¡RESPUESTA ACTUALIZADA! Cambie el nombre de los divs con números, luego pase por ellos con un ciclo, mostrando solo el seleccionado.

Ejemplo: http://jsfiddle.net/howderek/Ysaer/

Respondido el 10 de Septiembre de 12 a las 23:09

Probé ese kha0s y aunque funciona bien con el Si lo creaste, no parece querer funcionar con el script del documento de Google, así que creo que debe haber algún problema con eso: Jonnie

Hmm... ¿Tienes un enlace a donde está alojado esto? - howderek

desafortunadamente no, ya que actualmente lo estoy ejecutando en una máquina local en casa, pero intentaré cargarlo mañana y publicar un enlace: Jonnie

Lo siento, pero me iré mañana... así que veré qué puedo hacer en los próximos minutos... - howderek

Gracias Kha0s, resulta que el problema es con el script de gráfico interactivo de Google, lo reemplacé con la alternativa de imagen estática y funciona bien. - Jonnie

document.getElementsByTagName('topPlayer').style.display='none';

Esto hace... NADA. topPlayer no es un "Nombre de etiqueta", ¿verdad?

Respondido el 10 de Septiembre de 12 a las 22:09

tienes razón, mi error, fue una de las "soluciones" sugeridas que obtuve de Google y llegó tarde y me cansé. Nunca me di cuenta. Gracias por la sugerencia. Desafortunadamente, ese no fue el (único) problema, ya que mencioné que había probado otros formas. - Jonnie

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.