Dynamically Change Text of Text Box to Display Name

[gthroop]

Hey, I’m rusty on Hype and know I’ve used dynamic text, but can’t remember how. I think this is pretty simple.

Photos are dragged onto a ‘frame’ on the ‘wall’.
Each photo has the identical Class name of “photos”.
Each photo has a unique Display Name.
The text box above the “frame” (not in this online version because it doesn’t work yet) needs to read the Display Name of each photo as it is dropped there.
I already have a ‘CheckDrop’ JavaScript function in place that works great. So I need to add the code in there and each time a photo is placed over the frame it will check the Display Name of that photo and populate it into the text box.

http://dragonfly-design.net/photoWall/

How do I do that? Thanks for any help!

[JimScott]

You could use your own custom HTML Attributes (version 4 of Hype) to allow easy data retrieval.

Without having access to your actual Hype document I will need to make a relative example. This example is not a drag & drop - but it shows the mechanism.

Hype Document: Data Attributes Example.hype.zip (165.2 KB)

In the “Additional HTML Attributes” section of the “Identity Inspector” there is a “key/value” arrangement associated with the image. The key is “data-image_01” and the corresponding value is “Shakti Knoll” the title of the image.

When the image is clicked on (“Mouse Down”) the "imageTitle" function is called. A variable "whatImage" is given the value of the clicked "element" (i.e. the clicked target~image), plus "dataset", and then the “key” part of the image’s “Attributes” (“img_01”) like this:

whatImage = element.dataset.img_01

Then the "whatImage" variable value is assigned to the innerText of the text field “Image Title” (using its ID - "imageTitle").

imageTitle.innerText = whatImage;

Just two lines of code for the (only) function, plus the “Key/value” set-up in the “Additional HTML Attributes” for each image.

---

You of course have your “Drag & Drop” operation to adapt for. So without being able to see your code I would have the "whatImage" variable assigned in the drag portion of your code. The "imageTitle.innerText" would be placed in the Drop.

[gthroop]

Hey Jim,

Thank you so much for taking the time to help me with this!

I tried to attach the file, but it’s too large because of the photos. I can’t get this to work. I can call the new JavaScript function “theImageTitle” on Drag, but nothing happens. When I put the same code into the “checkDrop” function (which is the engine to this all working) it doesn’t work either. The weird thing is the first time I tried it worked perfectly. When I added the next Key/Value on the next photo it stopped working. Now I have only one photo defined and it won’t work at all, just give me Undefined (which is something I guess, it is trying to read it).

There are many images, do I name each image, data_img01? Seemed simple enough, but not working. Here’s the current code I have in checkDrop:

whatImage = element.dataset.img_01;
imageTitleLRL.innerText = whatImage;

… then I have it correctly on the photograph…

… and on the text box where the title of the photograph should be going…

Not sure why it won’t read it. Any advice you or others might have is appreciated.

[gthroop]

data-img_01, not data_img_01… it’s always the little things! thanks again.

[JimScott]

So everything is working?

[boess (Ben Stoess)]

Hi Jim,

I´m stuck with a problem. Your solution is great but it doesn´t work if if you want to use CLASS instead of ID to output the value.

Background: I need to output a button value. The button and the output field is reused several times. I used this code, but I don´t any output:

     var outputField = document.getElementsByClassName("dangerOutput");
 var data = element.dataset.danger;
 outputField.innerText = data;

I don´t unterstand why I don´t get any output. Any idea?

best,
ben

[JimScott]

Hi Ben!

An example Hype project showing your set-up would be great to see for the most accurate reply.

Please note: I am officially retired (in Mexico ) and I am not at my computer everyday so my response may not be immediate.

Anyone else - feel free to chime in!

[ktewes (Kalle)]

'getElementsByClassName' returns an array, so you have to adress 'dangerOutput[0]'

var outputField = document.getElementsByClassName("dangerOutput")[0];
var data = element.dataset.danger;
outputField.innerText = data;

I would recommend to use querySelector, if you work with classes:

var outputField = document.querySelector ('.dangerOutput');

[Djon]

Hope you enjoy a long retirement!

[boess (Ben Stoess)]

Thank you guys! In the meantime I have found that the problem is far more complex. Using queryselector helped partly. I'll try to send you a sample file as soon as possible. Meanwhile I´ll try Max´s solution.+++best ben