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

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


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++) { 
		// Shows hidden element by changing it's style to display:block :
} (354.8 KB)

CleanShot 2022-06-12 at 12.37.18

It is effortless using Hype Action Events: (37,1 KB)

1 Like

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?

yes ... it's all in your hands :wink:

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

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

and then use it like:


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

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 (40.1 KB)

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): (42,4 KB)

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.


Thanks Max!