Note that there are some explanatory texts on larger screens.

plurals
  1. POonclick won't let me set div display to hidden and another to inline, inline works once when hidden commented out
    primarykey
    data
    text
    <p>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.</p> <p>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. </p> <p>Below is my div layout: </p> <pre><code>&lt;div id="top_scorer"&gt; &lt;span id="top_scores_menu"&gt; &lt;a onclick='getTopPlayer("top_mens")'&gt;Men's&lt;/a&gt; &lt;a onclick='getTopPlayer("top_womens_2nd")'&gt;Women's 1st&lt;/a&gt; &lt;a onclick='getTopPlayer("top_womens_1st")'&gt;Women's 2nd&lt;/a&gt; &lt;/span&gt; &lt;div id="top_mens" class="topPlayer"&gt; &lt;? echo $mens_top_scorers; ?&gt; &lt;/div&gt; &lt;div id="top_womens_1st" class="topPlayer" style="display: none ;"&gt; &lt;? echo $womens_1st_top_scorer; ?&gt; &lt;/div&gt; &lt;div id="top_womens_2nd" class="topPlayer" style="display: none ;"&gt; &lt;? echo $womens_2nd_top_scorer; ?&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And this is the simple JavaScript I am trying to use:</p> <pre><code>function getTopPlayer(WhoToShow){ //alert(WhoToShow); document.getElementsByTagName('topPlayer').style.display='none'; document.getElementById(WhoToShow).style.display='inline'; } </code></pre> <p>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 <code>document.getElementById(WhoToShow).style.display='inline'</code> It works ONCE and then the links are unclickable, if I leave the <code>document.getElementById(WhoToShow).style.display='inline';</code> uncommented it doesn't work at all. </p> <p>Now I have tried this many different ways, Originally I was trying to use the following:</p> <pre><code>function getTopPlayer(WhoToShow, hide1, hide2){ document.getElementById(hide1).style.display="none"; document.getElementById(hide2).style.display="none"; document.getElementById(WhoToShow).style.display="inline"; } </code></pre> <p>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.</p> <p>This is an example of the google doc iframe script echo'ed by the php:</p> <pre><code>&lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"&gt; { "dataSourceUrl": "//docs.google.com/spreadsheet/tq?key=0AmOgECNc58wCdFJzUVkyMmJ1dTBqXzVuQmxlc3F0UkE&amp;transpose=1&amp;headers=1&amp;range=A1%3AB100&amp;gid=1&amp;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" } </code></pre> <p></p> <p>I would really appreciate any Help or advice anyone can offer as I'm ready to take my frustration out on my laptop. </p> <h1>Resolved (kinda)</h1> <p>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</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload