-1

I am trying to define variables based on if certain Id's exist. Example:

if (document.querySelector("a#sell")) {
    var sell;
} else if (document.querySelector("a#buy")) {
    var buy;
} else if (document.querySelector("a#area")) {
    var area;
} else {
    var contact;
}

It isn't working. If I define them without the if/else statements below they work just fine:

   var sell = document.querySelector("a#sell");
   var buy = document.querySelector("a#buy");
   var area = document.querySelector("a#area");

BUT I have to have the if/else statements so any contact form without those id's would behave different. What am I doing wrong?

Kevin Boroumand
  • 37
  • 4
  • This really seems like an [XY problem](http://xyproblem.info/). Explain the higher level issues regarding the form(s). My guess is you then have another set of `if/else` to check for those variables which would make the ones above completely redundant – charlietfl May 25 '20 at 23:09
  • Here is the JS file [link[(https://u.realgeeks.media/lookinwa/js/forms.js). My guess is because multiple of these elements appear on the same page at once it screws with it? Not too sure. – Kevin Boroumand May 25 '20 at 23:14
  • That doesn't explain the higher level problem you are trying to solve with what looks like code bloat – charlietfl May 25 '20 at 23:15
  • You can probably simplify this with a common class on each of those `` and use one event listener based on that class as selector and check the id in the event handler – charlietfl May 25 '20 at 23:17
  • There is a common class, it's "a.popup". But when I set else if to a.popup it didn't work. – Kevin Boroumand May 25 '20 at 23:23
  • Did you try something like : `$('a.popup').click(function(){ if(this.id==='sell'){... } })`? – charlietfl May 25 '20 at 23:25
  • But all those querySelectors are redundant because `this` is already the element you are querying for. You are checking it's id....then querying for `this` again in the dom when you alredy have a reference to that element. An explanation of higher level use case would be helpful – charlietfl May 25 '20 at 23:31
  • Yes I figured so. Sorry I am still pretty new. Ok, so lets say var contact is clicked. Would I wrap it in $(contact) {}? – Kevin Boroumand May 25 '20 at 23:43
  • Also assuming this is correct for what you suggested: $('a.popup').click(function(){ if(this.id==='sell') { var sell; } else if(this.id==='area') { var area; } else if(this.id==='buy') { var buy; } else { var contact; } } – Kevin Boroumand May 25 '20 at 23:44
  • No you are getting all confused with those `var sell, contact, buy `etc and most likely over complicating things. Again...would help to explain the higher level issue(s). When you do `$('a.popup').click(function(){ })` then `this` inside that function is the element event occurred on....and it will have one of those 3 id's. Then you do what is required based on which one it is – charlietfl May 25 '20 at 23:45
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/214628/discussion-between-kevin-boroumand-and-charlietfl). – Kevin Boroumand May 25 '20 at 23:55

1 Answers1

0

It seems that you aren't defining your variables in your first example. While you do declare a variable, you aren't setting the variable.

May I suggest something of this nature?

var selected; 
if (document.querySelector("a#sell")) {
    selected = document.querySelector("a#sell");
} else if (document.querySelector("a#buy")) {
    selected = document.querySelector("a#buy");
} else if (document.querySelector("a#area")) {
    selected = document.querySelector("a#area");
} else {
    selected = null;
}

Otherwise, you could also do this:

if (document.querySelector("a#sell")) {
    var sell = document.querySelector("a#sell");
} else if (document.querySelector("a#buy")) {
    var buy = document.querySelector("a#buy");
} else if (document.querySelector("a#area")) {
    var area = document.querySelector("a#area");
} else {
    var contact; // You still need to set this.
}
Johnathan Irvin
  • 129
  • 7
  • For some reason this doesn't work. I want to note, multiple of these variables are on this page at the same time and are to be activated on click. If it helps, this is the JS file: [link](https://u.realgeeks.media/lookinwa/js/forms.js) – Kevin Boroumand May 25 '20 at 23:12
  • @KevinBoroumand The first part of my answer won't work for your needs, but the second should be more towards that goal. Are you sure you're not serving up those functions before the document is ready? https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t?answertab=votes#tab-top – Johnathan Irvin May 25 '20 at 23:17