Question

I’ve tried searching this on Google and here but nothing like the issue I’m having is coming up so I am fairly certain this is not a duplicate topic.

I have 3 divs I’m trying to hide 2 and display one using JavaScript. It shouldn’t be complicated as I’ve done it many times before but it’s driving me insane.

Below is my div layout:

<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>

And this is the simple JavaScript I am trying to use:

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

}

The weird thing is if I comment out everything within the function except for the alert, it works as expected all the time, if I comment out everything except the document.getElementById(WhoToShow).style.display='inline' It works ONCE and then the links are unclickable, if I leave the document.getElementById(WhoToShow).style.display='inline'; uncommented it doesn’t work at all.

Now I have tried this many different ways, Originally I was trying to use the following:

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

This works perfectly on the first click then noting happens on any further onclick’s. The only other thing I can think of that may be having an effect is that the php code simply echo’s out a published google doc graph iframe, unless I have stupidly overlooked something ridicules.

This is an example of the google doc iframe script echo’ed by the 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"
}

I would really appreciate any Help or advice anyone can offer as I’m ready to take my frustration out on my laptop.

Resolved (kinda)

so I was able to track down the source of the issue to the Google generated script, I replaced the interactive chart script with the Image chart and that works as expected, Unfortunately I could not get it to work with the interactive Charts

Answer 1

You used getElementsByTagName instead of getElementsByClassName. And it returns an array of elements we need to loop through.

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';
}​

UPDATE

I got the info that getElementsByClassName does not work in IE < 9 in a simular answer I did so I added some code on that answer that might help this one aswell.

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