title: Two different js under two button on one page
body: <p>On my page I have two buttons, button 1 and button 2. Under those buttons I want to get the value of a javascript per button, so that I can switch the javascript per button. I am a beginner and I can really use some help for this :) I have tried everything that is possible at my knowledge level. I searched on Stack but didn't find anything close to what I needed. Hopefully you can help me.</p>
  
  <p><strong>EDIT</strong>: Ive updated my snippet. Now one button is working en de graph is coming. When i push the second button nothing happens.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction1() {
    var x = document.getElementById('3d-graph');
      if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }
  function myFunction2() {
    var x = document.getElementById('graph');
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }
  
      var elem = document.getElementById("graph");
      var drivertwo = neo4j.v1.driver("bolt+routing://90bfd895.databases.neo4j.io", neo4j.v1.auth.basic("got", "got"),{encrypted: true});
   var sessiontwo = drivertwo.session();
   var starttwo = new Date()
      sessiontwo
        .run('MATCH (n)-[r]-&gt;(m) RETURN { id: id(n), label:head(labels(n)), community:n.title, caption:n.title, size:n.title } as source, { id: id(m), label:head(labels(m)), community:n.title, caption:m.title, size:m.title } as target, { weight:r.title, type:type(r), community:case when n.title &lt; m.title then n.title else m.title end} as rel LIMIT $limit', {limit: 1000})
        .then(function (result) {
          var nodes = {}
          var links = result.records.map(r =&gt; { 
          var source = r.get('source');source.id = source.id.toNumber();
             nodes[source.id] = source;
          var target = r.get('target');target.id = target.id.toNumber();
             nodes[target.id] = target;
             var rel = r.get('rel'); if (rel.weight) { rel.weight = rel.weight.toNumber(); }
          return Object.assign({source:source.id,target:target.id}, rel);
       
       });
           sessiontwo.close();
          console.log(links.length+" links loaded in "+(new Date()-starttwo)+" ms.")
          var gData = { nodes: Object.values(nodes), links: links}
          var Graph = ForceGraph()(elem)
                        .graphData(gData)
                        .nodeAutoColorBy('label')
                                .linkDirectionalParticles('weight')
                        .linkDirectionalParticleSpeed(0.001)
                        .nodeLabel(node =&gt; `${node.label}: ${node.caption}`)
                        .onNodeHover(node =&gt; elem.style.cursor = node ? 'pointer' : null);
        
   
      
        
        });
     
       
  
      var elem = document.getElementById('3d-graph');
      var driver = neo4j.v1.driver("bolt+routing://90bfd895.databases.neo4j.io", neo4j.v1.auth.basic("got", "got"),{encrypted: true});
   var session = driver.session();
   var start = new Date()
      session
        .run('MATCH (n)-[r]-&gt;(m) RETURN { id: id(n), label:head(labels(n)), community:n.title, caption:n.title, size:n.title } as source, { id: id(m), label:head(labels(m)), community:n.title, caption:m.title, size:m.title } as target, { weight:r.title, type:type(r), community:case when n.title &lt; m.title then n.title else m.title end} as rel LIMIT $limit', {limit: 1000})
        .then(function (result) {
          var nodes = {}
          var links = result.records.map(r =&gt; { 
          var source = r.get('source');source.id = source.id.toNumber();
             nodes[source.id] = source;
          var target = r.get('target');target.id = target.id.toNumber();
             nodes[target.id] = target;
             var rel = r.get('rel'); if (rel.weight) { rel.weight = rel.weight.toNumber(); }
          return Object.assign({source:source.id,target:target.id}, rel);
       
       });
           session.close();
          console.log(links.length+" links loaded in "+(new Date()-start)+" ms.")
          var gData = { nodes: Object.values(nodes), links: links}
          var Graph = ForceGraph3D()(elem)
                        .graphData(gData)
                        .nodeAutoColorBy('label')
                                .linkDirectionalParticles('weight')
                        .linkDirectionalParticleSpeed(0.001)
                        .nodeLabel(node =&gt; `${node.label}: ${node.caption}`)
                        .onNodeHover(node =&gt; elem.style.cursor = node ? 'pointer' : null);
        
   
      
        
    
        
        });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/force-graph"&gt;&lt;/script&gt;
   &lt;script src="https://unpkg.com/3d-force-graph"&gt;&lt;/script&gt;
   &lt;script src="https://cdn.rawgit.com/neo4j/neo4j-javascript-driver/1.2/lib/browser/neo4j-web.min.js"&gt;&lt;/script&gt;
  
  
  
  &lt;button onclick="myFunction1()"&gt;Try it&lt;/button&gt;
  &lt;button onclick="myFunction2()"&gt;Try it&lt;/button&gt;
  &lt;p id="graph"&gt;&lt;/p&gt;
  &lt;p id="3d-graph"&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>