Question

在我的页面上，我有两个按钮，按钮1和按钮2。在这些按钮下，我想获取每个按钮的javascript值，以便可以切换每个按钮的javascript。我是一个初学者，我真的可以为此提供帮助：)我已经尽我所能尝试了一切知识。我在Stack上搜索，但找不到与我需要的东西接近的东西。希望你能帮助我。

编辑：我已经更新了我的代码段。现在一个按钮正在工作，图即将到来。当我按下第二个按钮时，什么也没发生。

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

尝试一下，让我知道是否还有其他问题：

<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>

将“ this”传递给myFunction的“ elem”将是您单击的按钮。请记住，最好使用.addEventListener（'click'，function（ev）{}）而不是“ onclick = function（）”

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

我不知道其余代码的作用是什么，如果可以的话，但是我发现很多重复。如果可以，请尝试将所有neo4j调用放入函数中，以便您每次需要时都可以使用它。

Answer 2

按钮正常工作。您看不到其中一张图片的原因是您两次声明了var elem。

如果您将elem中的elem2替换为var elem = document.getElementById('3d-graph');，并在下面的代码中将其修复。

但是最好将图像加载包装在一个单独的函数中，如下所示：

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

，然后两次调用此函数：

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

一页上的两个按钮下的两个不同的js

2 个答案: