Variable not equal to $w object?

Ask the community
,
1

Hi, I’m trying to assign a $w object to a variable and then check if the variable is the same as the $w object. The result is always “false” - but why? Hpw can I assign the variable correctly so the result becomes “true”

Here is the code example:

export function testButton_click ( event ) {
let navPoint = $w ( “#testContainer” );
console . log ( $w ( “#testContainer” ) === navPoint );
}
Console result: false.

2

What is your aim?
Why you need the object to be assigned/declared as variable?

$w.onReady (()=>{
$w (’ #menuMobileLoesungen ’ ).onClick(()=>{console.log(“Menü aktiv”…)
let navPoint = $w (’ #menuMobileLoesungen Content’ );
console.log(navPoint);
});
});

What do you get in console?
Ich nehme an du weißt wo man die Konsole findet.

3

Hi, thanks for reaching out. Console result is “false”.

I need to declare the object as variable for a kind of menu. several buttons collapse/expand containers when pressed. I need to remember the last container expanded, to collapse it when a button is pressed again.

Here is the whole code:

var mobileMenuActiveContainer;
var mobileMenuActiveTitle;

export function button1_click(event) {
 let navPoint = $w("#button1Container");
 let thisItem = $w("#button1");

 if (navPoint.collapsed === true) {
  navPoint.expand();
 
 //check if the last expanded container is not the same which is opened now.
  if (mobileMenuActiveContainer !== undefined && mobileMenuActiveContainer !== navPoint) {
   mobileMenuActiveContainer.collapse();
   mobileMenuActiveTitle.style.backgroundColor = colorWhite;
   mobileMenuActiveTitle.style.color = colorAragoBlue;
   }
 
 //assign variables to remember which container was last opened.
  mobileMenuActiveContainer = navPoint;
  mobileMenuActiveTitle = thisItem;
  thisItem.style.backgroundColor = colorLightBlue;
  thisItem.style.color = colorLearningBlue;
  }
  
 else {
 navPoint.collapse();
 thisItem.style.backgroundColor = colorWhite;
 thisItem.style.color = colorAragoBlue;
 }
}


export function button2_click(event) {
 let navPoint = $w("#button2Container");
 let thisItem = $w("#button2");

 if (navPoint.collapsed === true) {
  navPoint.expand();
 
 //check if the last expanded container is not the same which is opened now.
  if (mobileMenuActiveContainer !== undefined && mobileMenuActiveContainer !== navPoint) {
   mobileMenuActiveContainer.collapse();
   mobileMenuActiveTitle.style.backgroundColor = colorWhite;
   mobileMenuActiveTitle.style.color = colorAragoBlue;
   }
 
 //assign variables to remember which container was last opened.
  mobileMenuActiveContainer = navPoint;
  mobileMenuActiveTitle = thisItem;
  thisItem.style.backgroundColor = colorLightBlue;
  thisItem.style.color = colorLearningBlue;
  }
  
 else {
 navPoint.collapse();
 thisItem.style.backgroundColor = colorWhite;
 thisItem.style.color = colorAragoBlue;
 }
}

//I have 5 more of tose buttons and functions

The problem is, that…

if (mobileMenuActiveContainer !== undefined && mobileMenuActiveContainer !== navPoint) {

…always results true, even if mobileMenuActiveContainer and navPoint are the same!

4

PS: I updated the initial question to be more understandable.

5

You could check for the element id. Something like this:

let element = $w('#element1');
console.log(element.id === $w('#element').id); // true
6

Thank you for the idea! It works if I assign some $w(#“dummy”) to the global variables first to avoid failure on ID and Style of undefined.

Anyways, it would be great to understand the behaviour without the ID. Do you have any explanation?

here’s the updated working code with the dummy element

7 
var mobileMenuActiveContainer;
var mobileMenuActiveTitle;

$w.onReady(function () {
	mobileMenuActiveContainer = $w("#dummyShape");
	mobileMenuActiveTitle = $w("#dummyShape");
});

export function button1_click(event) {
	let navPoint = $w("#button1Container");
	let thisItem = $w("#button1");

	if (navPoint.collapsed === true) {
		navPoint.expand();
		
		if (mobileMenuActiveContainer. id !== navPoint. id) {
			mobileMenuActiveContainer.collapse();
			mobileMenuActiveTitle.style.backgroundColor = colorWhite;
			mobileMenuActiveTitle.style.color = colorAragoBlue;
		}
		
		mobileMenuActiveContainer = navPoint;
		mobileMenuActiveTitle = thisItem;
		thisItem.style.backgroundColor = colorLightBlue;
		thisItem.style.color = colorLearningBlue;
	}
	else {
		navPoint.collapse();
		thisItem.style.backgroundColor = colorWhite;
		thisItem.style.color = colorAragoBlue;
	}
}