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.