How to style element clicked, remove styling from related others in set

Using JavaScript with Hype
1

Hi!

My over all goal is to allow the user to click one and only one element from each of the three sets(mileage, electricity, hydrogen. The user can change their mind and pick another one from that set. When one is selected, styling is turn on and others off. Like the radio-button form input behavior of only picking one.

I am trying to style the border of this element when the transparent layer above is clicked. It is not working :frowning: ! Can anyone see what I am doing wrong? I am not getting any errors.

I created a transparent element (layer RectHotSpot.) When the mouse is clicked on this, it runs the Javascript function (btn100()) that contains the following code:

function btn100(hypeDocumnet, element, event) {
console.log(‘entered100btn’);

 hypeDocument.getElementById('100toBorder').style.borderWidth = "3";
 hypeDocument.getElementById('100toBorder').style.border = "3 solid #438730";

       // turn off border styles off for other two, 
       //hypeDocument.getElementById('200toBorder').style.borderWidth = "0";
       //hypeDocument.getElementById('200toBorder').style.border = "none";
       //hypeDocument.getElementById('300toBorder').style.borderWidth = "0";
       //hypeDocument.getElementById('300toBorder').style.border = "none;
       
   mileageSelected = '100';

}

I want to style the element below it (RectAddBorder) with the styles in the function. Visibility for this element is on.

I’m open to ideas on how to handle this “only one”, radio button like behavior if anyone has a good idea.

I tried a different technique with the Yes No buttons. Styling when Pressed, but the borders don’t stay one when mouse leaves button area.

Thanks!

<a class=“attachment”

tumulthosspot
tumulthosspot.jpg2036×1114 547 KB

prototypeV3newCalcSetA.zip (75.4 KB)

2

The simplest way is to put your style for the active button in the head.

	<style>

.activeButton{
  border-style: solid!important;
  border-color: #438730!important;
 
}

</style>

Have a look at what I did to your hot spots and the text.

The Text elements have been set to ignore mouse events.

16

This way the hotspots can be used as background colour and a hot spot since you will be clicking through the text and not the text. ( this is not the only way to fix that part but simple and with out changing your setup too much )

The code then just looks for all the elements t=you have given your button class of ‘btn100k’

It removes the active class name ‘activeButton’ we will use from any that have it. Then for the element that made the call it will add it to it.

This works as a toggle for the style.

var allButtons  =  document.getElementsByClassName('btn100k') //— WE GET AN ARRAY OF THE CLASS OBJETCS

  for (i = 0; i < allButtons.length; i++) { 
allButtons[i].classList.remove('activeButton') 
 }
       
element.classList.add('activeButton')

prototypeV3newCalcSetA_vMH1.hype.zip (75.7 KB)

3 Likes
3

Great tips @MarkHunte! You the man! :raised_hands: You’re right, having access to the html HEAD tag is really powerful - including putting document wide styles and javascript.

Great advice on how to deal with text in hot spots. :+1:

Thanks a million! :smile:

1 Like