How to show or hide graphics ?

Question

1.89/5 (3 votes)

See more:

I have made two graphics (Line and Bar) and two buttons.
When clicking on Line I want Line graphic on screen and Bar hidden,
when clicking on Bar, I want Bar on screen and Line hidden

Code is shown as solution 2

What I have tried:

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Deelnemers per jaar</title>
<link href="VerticalBarGraph.css" rel='stylesheet' type='text/css' /> 

<script language="JavaScript" type="text/javascript">
function ChoiseButton() {
var e = document.getElementById
if (e == 'line') {
document.getElementsByid('line2').style.visibility = 'visible'
document.getElementsByClassName('bargraph').style.visibility = 'hidden'
} else {
document.getElementsByid('line2').style.visibility = 'hidden'
document.getElementsByClassName('bargraph').style.visibility = 'visible'
}

}
</script>

</head>

<body>
<button id="line" type="button" >Line</button>
<button id="bar" type="button" >Bar</button>

Deelnemers per jaar

17
23
19
14
23
17
22
13
14
16
18

2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016

25
20
15
10
5
0

Aantal deelnemers door de jaren heen

</body>
</html>

Posted 9-Jun-16 7:38am

Luc Baetsle

Updated 9-Jun-16 22:45pm

v6

Add a Solution

Comments

Luc Baetsle 10-Jun-16 3:23am

I hope that you all see, why I post in in solution !!!

2 solutions

Solution 1

I can immediately see one apparent bug:

JavaScript

if (dif == 'lijn') { ... }

The object dif cannot be compared with any string; it is an object representing HTML document. You don't need to check up anything at all. You find the element by the attribute id, but this attribute value should always be unique on page. Therefore, you either correctly find it, or not — it cannot possibly be "wrong element"; the whole idea is wrong.

You also should know that not found element is returned as null, and that you cannot search for elements added dynamically to your HTML DOM:
document.getElementById() — Web APIs.

Your way of hiding and showing an element is not the only one. Different methods give you different effects, first of all, it the ways the hiding affects the layout. Please see my answer which describes different methods, hopefully, more or less comprehensively: How to show and hide div.

—SA

Posted 9-Jun-16 7:49am

Sergey Alexandrovich Kryukov

Updated 9-Jun-16 7:51am

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Luc Baetsle · Accepted Answer · 2016-06-09T22:45:00

HTML

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Deelnemers per jaar</title>
      <link href="VerticalBarGraph.css" rel='stylesheet' type='text/css' />
      <script src='js/Script2.js'></script>
      <script src='js/Script1.js'></script>
    
      <script type="text/javascript">
          function ToonLijn() {
              document.getElementById("Bar").style.display = "none";
              document.getElementById("Lijn").style.display = "block";
          }
          
          function ToonBar() {
              document.getElementById("Lijn").style.display = "none";
              document.getElementById("Bar").style.display = "block";
          }
      </script>
  
  
  
  </head>

  <body onload="ToonBar()">
       <button onclick="ToonLijn()" style="width:100px">Lijndiagram</button> <br/>
       <button onclick="ToonBar()" style="width:100px">Staafdiagram</button>

      <div id="Bar">
          <div class="bargraph" style="width: 805px;">
              <ul class="bars">
                  <li class="bar1 purplebar" style="height: 170px;">17</li>
                  <li class="bar2 redbar" style="height: 230px;">23</li>
                  <li class="bar3 bluebar" style="height: 190px;">19</li>
                  <li class="bar4 greenbar" style="height: 140px;">14</li>
                  <li class="bar5 orangebar" style="height: 230px;">23</li>
                  <li class="bar6 grapebar" style="height: 170px;">17</li>
                  <li class="bar7 crimsonbar" style="height: 220px;">22</li>
                  <li class="bar8 navybar" style="height: 130px;">13</li>
                  <li class="bar9 goldbar" style="height: 140px;">14</li>
                  <li class="bar10 redbar" style="height: 160px;">16</li>
                  <li class="bar11 orangebar" style="height: 180px;">18</li>

              </ul>
              <ul class="label"><li>2006</li><li>2007</li><li>2008</li><li>2009</li><li>2010</li><li>2011</li><li>2012</li><li>2013</li><li>2014</li><li>2015</li><li>2016</li></ul>
              <ul class="y-axis"><li>25</li><li>20</li><li>15</li><li>10</li><li>5</li><li>0</li></ul>
              <p class="centered">Aantal deelnemers door de jaren heen</p>
          </div>
      </div>

      <div id="Lijn">
          <div style="width:50%; margin:20px auto;">
              <canvas id="GraficoLine" style="width:100%;"></canvas>
          </div>
      </div>



  </body>
</html>