JS query not defined

Question

So I've been looking through stackoverflow for similar problems / answers and gotten nowhere so I opened this new question in hopes someone can help me. Basically I have a HTML page and a Javascript page. All other functions are working except this specific one. I think the problem is something to do with reloading the DOM but I can't figure out the problem. I have this on my HTML:

<button id="advanced_search" onclick="query()">Advanced Search</button>

And I have this on my Script:

document.addEventListener("DOMContentLoaded", function(e)
{
....
....
....
 // V Everything inside here is fine, if I put this in the html page inside 
 // V a <script></script> it works fine.
 function query() {
      ...
      ...
      ...
    if(add_and != 0){
    //Im using cypher to query my neo4j database.
        queryStr = "match (n)-[r]->(m) where " + add_and.join(" ")+ " return 
        n,r,m";
    } else {
        queryStr = 'match (n)-[r]->(m) return n,r,m';
    }  
 }

 // side problem: the queryStr doesn't change from function query to var jqxhr
 var jqxhr = $.post(neo4jAPIURL, '{"statements":[{"statement":"' + queryStr + '", "resultDataContents":["graph"]}]}', 
function(data) {
 ...
 ... // some d3.js stuff inside
 ...
 }

My problem is that it says the function query() is not defined at HTMLButtonElement.onclick even though I'm calling the function:

<script src="/scripts/force_directed_layout.js"></script>

The expected result is when I press the <button id="advanced_search"> the function should run normally but this is not the case. If anyone could help me it would be wonderful.

Andreas Dolk · Accepted Answer · 2020-05-26 15:27:17Z

2

You define the query function inside the listener function. So it isn't visible outside of this function's scope. If you want to call the method directly 'from the button', then you have to attach it to window. You could add a

window.query = query;

statement after the query function declaration.

answered May 26, 2020 at 15:27

Andreas Dolk

115k20 gold badges185 silver badges275 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kiran Shinde · Accepted Answer · 2020-05-26 15:44:21Z

2

Though Andreas's answer is right, I would like to add an alternative

You can bind click directly in your JS file instead of HTML

like

document.getElementById('advanced_search').addEventListener("click", query);

answered May 26, 2020 at 15:44

Kiran Shinde

6,0326 gold badges30 silver badges45 bronze badges

Collectives™ on Stack Overflow

JS query not defined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related