Two different js under two button on one page

Question

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.

EDIT: Ive updated my snippet. Now one button is working en de graph is coming. When i push the second button nothing happens.

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]->(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 < 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 => { 
        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 => `${node.label}: ${node.caption}`)
                      .onNodeHover(node => 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]->(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 < 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 => { 
        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 => `${node.label}: ${node.caption}`)
                      .onNodeHover(node => elem.style.cursor = node ? 'pointer' : null);
      
 
    
      
  
      
      });

<script src="https://unpkg.com/force-graph"></script>
 <script src="https://unpkg.com/3d-force-graph"></script>
 <script src="https://cdn.rawgit.com/neo4j/neo4j-javascript-driver/1.2/lib/browser/neo4j-web.min.js"></script>



<button onclick="myFunction1()">Try it</button>
<button onclick="myFunction2()">Try it</button>
<p id="graph"></p>
<p id="3d-graph"></p>

Answer 1

The buttons work correctly. The reason you don't see one of the images is that you declared var elem twice.

If you replace elem by elem2 in var elem = document.getElementById('3d-graph'); and in the code below that, then it will be fixed.

But it would be better to wrap the image loading in a separate function, like this:

function loadImage(elementId) {
    var elem = document.getElementById(elementId);
    ...
    ...
}

and then call this function twice:

loadImage('graph');
loadImage('3d-graph');

Answer 2

try this and let me know if there are other problems:

<button id='1' onclick="myFunction(this)">button 1</button> 
<button id='2' onclick="myFunction(this)">button 2</button> 
<p id="graph"></p>
<p id="3d-graph"></p>

Passing "this" to myFunction, the "elem", will be the button you click. Remember that is better to use .addEventListener('click', function(ev){}) instead "onclick=function()"

function myFunction(elem) {
    document.getElementById("graph").innerHTML = "ID:" + elem.id;
    document.getElementById("3d-graph").innerHTML = "ID:" + elem.id;
}

I don't know what the code below what the rest of the code will do, and if it works, but i see a lot of duplications. If you can, try to put all the neo4j call inside a function, so that you can use this every time you need it.