Buttons to add text

1

I’m not sure if this is possible in Hype, but if it is, it will save me a lot of time.

I have several buttons, button1, 2, 3, and 4. If you click on button 1, it’s value is added to a textbox. If you click on button 2, it’s value is concatenated with the value of button 1. Is there a way to do this?

2

I’d say yes but there are many approaches to it. If you can share what you’ve done I or someone else may be able to add to it in order to get you where you want to be.

If you can .zip it up and drop it here in the forum. That way we can make sure we understand your approach so that we can tailor a solution. There are some questions that a document would set straight, like, how are you adding the values. Do you need the values in order? Do the buttons have to be in order? etc. :wink:

3

I’ll do a little more first. If I still have a problem I’ll send something a little later. This is a kind of calculator. A person clicks buttons or chooses from combo boxes (that’s another problem) and in the end a product number and picture is generated from the choices made. I’ve done it before in flash but that was a little different.
thanks for your help,
I’ll be back.

4

no worries. If/when you come back make sure (if you can) to upload a document. It’s much easier to see what’s what that way. I appreciate the insight you’ve given as to what you want done but it’ll make it easier to offer solutions :slight_smile: Of course, if the document is sensitive then perhaps a dummy doc with the same approach :wink:

5

I’ve tried everything! lol. I’m trying to click on the button 95° and have it enter text in the text box below that. I want to give each button a value so that if pushed, they will be added together and entered in a variable to be used for converting to a product number. (concatenate)configure.zip (160.2 KB)

6

A few things:

  • be careful how you write your code.
    hypedocument is incorrect. it should be hypeDocument
  • Also, it’s a little unclear as to what you want exactly to be the text box.
    I know you mention a product number but in your example, I can’t see how you’re doing that plus what kind of text you want in the box.

That being said. Here is an example of a function to run when clicking any button in order to get it’s contents into another element:

var demo = hypeDocument.getElementById("demo");

// element is the object that is calling this function.
// Could also use element.id
demo.innerHTML += element.innerHTML;
1 Like
7

Beautiful! I’m pretty green at this. I’m more of a “Hit or miss” programmer. I’m loving learning though. I was so glad to find Hype last week. It’s really easy to work with. I just want to do a little more. Thanks, I’ll have to dig deeper now.

8

You’ve put me on the EXACT path I need to be on now! I do have another question though. When I click on one of the buttons, how do I change the button state so that it stays selected until another button is selected? Is that a question to put forth to the forum? Thank you SOOO much for what you’ve done so far.

9

There are many ways to do this.

One way is to create an array like object to hold the current selection and then update the text with the items of the array.

We can do this with your example using a couple of premises,

We want to be able to click both frame and angle buttons to give a complete selection.
We want the user to be able to change the selection.
We want the text to always display the current selection.

Changes to your example.

We first give each frame button the same class name. In this case we add the class frame to the class field in the identity Inspector.

We do the same for all the Angle buttons, we give them all the same class angle

We do this so when the button is clicked we will know which class of button has called the single Hype function we have assigned to all buttons. ( yes assign the same function to every button )

Here is the function.

if (! window.selectionList){window.selectionList = {"frame": "", "angle" :""}}
	
	
	if (element.classList.contains('frame')){
	 window.selectionList.frame = element.innerHTML 
	 
	} else if (element.classList.contains('angle')){
	
	window.selectionList.angle =element.innerHTML
	}

	demo = hypeDocument.getElementById("demo")
	
	demo.innerHTML = window.selectionList.frame + window.selectionList.angle;

Lets break it down.

Firstly any variables we assign with the prefix window is us just making the var global and persistent for the session

if (! window.selectionList){window.selectionList = {"frame": "", "angle" :""}}

We need to create a persistent global var that will hold the selection details. This will be named window.selectionList

We must have window.selectionList declared before we can run any other code to check it. So we check to see if it exists already.

If it did not and we tried to query it we would get an error.

This IF clause allows us to check the var it exists already.

If it does not ( (! operator = not ) , which it will not when the function first runs then we declare it and then store the basic info into it. From then on this type of var will persist.

The type of info/data we use for the var is an Array like object or named array. These type of arrays use keys as the item names and values as the as the keys value.

{key: value}

We can then get to the value by using it’s key.

So in this case if we want to get the frame value we call to the variable window.selectionList and the key frame

window.selectionList.frame

So now we have the Array structure sorted and declared we can now use those class names we assigned to the buttons.

We check the class of button that called the function.

if (element.classList.contains('frame')){..

This is pretty much self explanatory.

If the class list ( an element can have any number of class names assigned to it ) contains a class name of ‘frame’ Then we do something.

If it contains ‘angle’ we do something else.

else if (element.classList.contains('angle')){..

This is where we can now use the keys in the Array like object that has been assign to the global persistent var.

We can set the values to the correct key.

window.selectionList.angle = element.innerHTML

Once we have figured that out, all we then need to do is update the text box with both values for both keys.

demo = hypeDocument.getElementById("demo")
	
demo.innerHTML = window.selectionList.frame + window.selectionList.angle;

Only the key value that is changed will be updated. the key value of the array that is not changed will persist from the previous selection.

Now even if the user re-clicks one of the buttons, only the value for the new selection will be changed but both current selections will be updated the the text filed.

Example project.

configure.hype 2.zip (186.2 KB)

4 Likes
10

Wow! This is an awesome forum! I worked Friday evening using the info I got from DBear. That enabled me to do quite a bit! But now, I see your reply. I had a similar idea earlier but didn’t know how to get it started. I saw where an object in javascript had properties(I don’t really know what I’m saying) hinge (Frame, angle, closure, attachment) I could see it but I didn’t know how to get it started. This gets me started. I’ve done more, easier since I’ve started using Hype than I ever thought I could do. I first did this app in Flash, and compiled for a windows app, then created in xcode and made an iPhone app. But Hype is going to be the BOMB! I don’t really have very much experience with this but I’m learning. I have a huge respect for programmers and I still get dizzy when I try to do too much myself. But I think this project is going to be great! Thank you so much for your help. I hope I can come back with more questions. I’ll have to wait until Monday to put this together, but I’m going to dig for more info and layout the pages to put together. Thanks again.

4 Likes