onclick won't let me set div display to hidden and another to inline, inline works once when hidden commented out

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

howderek · Answer 1 · 2012-09-10T22:13:14.817

2

UPDATED ANSWER! Rename the divs with numbers, then cycle through them with a loop, only showing the selected one.

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

edited Sep 10 '12 at 22:13

answered Sep 10 '12 at 21:26

howderek

2,224
14
23

I tried that kha0s and while it works fine with the
's you created it does not seem to want to work with the Google doc's script so I think it must be some issue with that
– jonnie Sep 10 '12 at 21:52
Hmm...Do you have a link to where this is hosted? – howderek Sep 10 '12 at 21:54
unforunitly not as I am currently running it on local machine at home, but I will try to upload it tomorrow and post a Link – jonnie Sep 10 '12 at 21:59
Sorry, but I'll be gone tommorow...so i'll see what I can do in the next few minutes... – howderek Sep 10 '12 at 22:01
Thanks Kha0s, turns out the issue is with the Google interactive chart script, I replaced it with the static Image alternative and it works fine. – jonnie Sep 11 '12 at 16:56

score 2 · Accepted Answer · edited May 23 '17 at 12:27

2

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

edited May 23 '17 at 12:27

Community

1
1

answered Sep 10 '12 at 21:29

Henrik Ammer

1,889
13
26

Edited the script just a tad and removed `wts` since it was a remnant of debug. – Henrik Ammer Sep 10 '12 at 21:32
Thanks for the suggestion Henrik but That didn't have any effect at all I'm afraid, Could I ask what the purpose of the return false is and why you assigned the function to a var rather then just call it? – jonnie Sep 10 '12 at 21:50
1

That code worked as a charm for me in the above scenario, [jsFiddle](http://jsfiddle.net/Fe5AK/). If it works there but not in your code you have other issues in your code. Like the chart javascript that you output from PHP. You first call the `.js` file and in the same ` – Henrik Ammer Sep 11 '12 at 07:16
So I have come to the conclusion that it is some issue with the google script. I did not write this as it was generated by google spread sheets. I could not resolve it with the interactive chart so I just used the Image version and it works fine. as for the `{'s` I have never seed or used any js script like it before so I didn't get it either. Thanks for the Help Henrik – jonnie Sep 11 '12 at 16:48
You're welcome and glad you also found a solution with the image version. Good luck on the project! – Henrik Ammer Sep 11 '12 at 16:58

score 0 · Answer 3 · answered Sep 10 '12 at 21:30

0

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

This does... NOTHING. topPlayer is not a "TagName" is it?

answered Sep 10 '12 at 21:30

Shmiddty

13,847
1
35
52

your right, my bad, was one of the suggested "solutions" I got from Googling and it being late and me Tired I never realised,Thanks for the suggestion Unfortunately that wasn't the (only) issue as I mention I had tried other ways. – jonnie Sep 10 '12 at 21:55

onclick won't let me set div display to hidden and another to inline, inline works once when hidden commented out

Resolved (kinda)

3 Answers3