Can't target "name" attribute in button like in a link

[Burndog (Steve)]

I have a simple single page that I want to place clear (no fill color) buttons on. These buttons will reveal a display:hidden element by switching it's style to block.

This works perfect when used with the name attribute in an anchor link:
test
The function works well and can have a lot of links showing many hidden elements as needed. But, linking from a button won't work due to a conflict in ID/Name in the targeted hidden element.

Can I create a new linked attribute like "target"? to avoid the conflict and still keep things unique? I've actually tried this and it works on the links but again, not on the button element

Function:

function showElement(hypeDocument, element, event) {
	var elementNames_ = document.querySelectorAll('.elementName')
 
		for (let i = 0; i < elementNames_.length; i++) {
		  elementNames_[i].addEventListener('click', listener);
		 // console.log(elementNames_);
		}
		
		
		function  listener(){
		
		// Create variable "val" selecting from attribute "name" :
		 var val = this.getAttribute('name')
		 
		 // Hides all items with class="blockEl" :
		    var blockEl_ = document.querySelectorAll('.blockEl')
				for (let i = 0; i < blockEl_.length; i++) { 
		  					  hypeDocument.getElementById(blockEl_[i].id).style.display='none';
					}
		// Shows hidden element by changing it's style to display:block :
		  		hypeDocument.getElementById(val).style.display='block';
		  		
		 }
}

GraphictecHomePage.zip (354.8 KB)

[MaxZieb (Loves Hype)]

It is effortless using Hype Action Events:
example-using-custom-functions-with-parameter.hype.zip (37,1 KB)

[Burndog (Steve)]

Thanks Max, but your example is not hiding prior shown elements which is key to the solution.

When an element is shown prior elements need to be hidden.

Will I find such a complete solution if I study the details here?

Hype Action Events

[Hype Action Events] Extension that easily offers to listen to a multitude of events and execute code based on these events. The declaration is as simple as assigning a key and value in the attributes panel (using data attributes). Furthermore, it offers code execution through the Custom Behavior interface. Introduction The extension consists of two parts, being Actions and Events. The action part was born out of the necessity to trigger Hype functions and was in a first alpha used in Hyp…

[h_classen (Hans-Gerd Claßen)]

yes ... it's all in your hands

you can chain the functioncalls like: hide('.hideOnLoad'); show('.ellipse')

[MaxZieb (Loves Hype)]

As Hans mentioned... it is just regular JavaScript (chaining with ;). You can also just create a new third function in HypeActionEvents()^*

hypeDocument.reveal = function(selector) {
	hypeDocument.hide('.hideOnLoad');
	hypeDocument.show(selector);
}

and then use it like:

reveal('.triangle')

---

*HypeActionEvents(): that function is conveniently triggered on Hype Document Load allowing to create function etc.

[Burndog (Steve)]

Thanks for the replies guys , but...

1. In the original project issue, why does the link when applied to the text element properly work with the function utilizing name and class. But the button or any other physical element will not work as it throws a "Uncaught TypeError: can't access property "style", hypeDocument.getElementById(...) is null" error?
   It seems like I was sooo close in the original project but just lacked being able to target the hidden element from anything other than a text link.
2. In Max's example, is it really necessary to bring in a separate framework to achieve the goal?
   I did try to incorporate the provided example into my project but could only get as far as initializing the Custom Behavior with hide('.hideOnLoad').
   adding the additional Function (and utilizing javascript "chaining") that first invokes the hideOnLoad class and then show(selector) makes logical sense but in practice, did not work for me (see attached project).

example-using-custom-functions-with-parameter -r1.hype.zip (40.1 KB)

[MaxZieb (Loves Hype)]

True. Sorry, the chaining should work. My reveal idea doesn't as initially posted… actually wrote that without testing it on the go (weekend, sun… etc.). I am attaching a working version and corrected the code suggestion above (missed adding hypeDocument):

example-using-custom-function-reveal.hype.zip (42,4 KB)

@Burndog

bring in a separate framework

It is far from a "framework" (10kb) … it extends Hype offering:

• a built-in Hype Document callback
• triggering JS from the action stacks
• a ton of extra events from Mutation observer to scroll, resize and DOM event.

I use it in nearly every commercial project these days. You also don't need to hotlink it. Just put it in your resource folder if that makes you feel better or is a project requirement.

[Burndog (Steve)]

Thanks Max!