Convert String to Text

Would appreciate comments on this.
I extract an element id using
var x = element.id;
Then want to convert it to a string using
xx = string(x);
then is want to slice it using
var x_slice = str.xx(0,1);
Now (I think ) I want to convert x_slice into text so I can use it in
hypeDocument.setElementProperty(x_slice, ‘opacity’, 0.5, 2.0, ‘easeout’);

Can’t seem get it to work. That’s the pain of being a beginner.

First in this case the string and text are the same thing.

The property value in the Hype Getter/Setter API cannot be text. It has to be the object. So you need to get that first.

         var elID =  element.id;
	 var sliced = elID.slice(0,4);
	 var x_slice = hypeDocument.getElementById(sliced)
	 hypeDocument.setElementProperty(x_slice, 'opacity', 0.5, 2.0, 'easeout');

Not sure I’m following the logic of this. Why would you be slicing the value of the element.id?

Surely you could just use element in setElementProperty. (which is the element object)

hypeDocument.setElementProperty(element, 'opacity', 0.5, 2.0, 'easeout')

Of course Mark’s explanation is correct for how to do it. But I just don’t understand the reasoning :smile:

1 Like

It maybe that the element with the id is not the same one to act on.

In which case i would use its class to get it and its ID for what they want

Thanks for your response.

Would you kindly explain

“The property value in the Hype Getter/Setter API cannot be text. It has to be the object. So you need to get that first.”

I do not understand the difference between “text” and “the object”. I think that the text string should id the object.???

That being said the code still will not work. I know that sliced is correct. hmmmm

A Button, DIV etc are seen as an objects. they have a structure with properties.
Initially you may give the them some properties to reference it. i.e an ID.

When you load that ID into a Variable / var, you are loading a string that spells out the ID in TEXT characters.

That is all that Variable is holding.

The Getter and Setters want the object not text. They will not work with the text.

So for :

hypeDocument.getElementProperty(element, 'propertyName')

hypeDocument.setElementProperty(element, 'propertyName', value, 1.0, 'easeinout')

You see they asks for the element not element name or element id.
element is the object not a string saying it's name.

In Hype if the Javascript is triggered/called by a click action, like what a button does then the element in the variable named element in the arguments of the function :

Function  foo(hypeDocument, element, event){
...

}

will represent the button.

This means you could place that in :

`hypeDocument.setElementProperty(element, 'opacity', 0.5, 1.0, 'easeinout');

And it would work.

If you want another element other than the calling one then you would need to place an Object reference to it in a Variable.

You would do this with an API that CAN use a string/text to return a reference to the Object directly.
You would place this reference to the object into a Variable.

var fooElement = hypeDocument.getElementById('foo');

Now we can use fooElement which as far as the Getter and Setter are concerned is the actual object.

`hypeDocument.setElementProperty(fooElement, 'opacity', 0.5, 1.0, 'easeinout');

Thanks again for your time, much appreciated. The above was insightful. Learning little by little.

Here is what I got so far, but still will not work.

 var elID =  element.id;
 var sliced = elID.slice(0,2);
 var x_slice = hypeDocument.getElementById('sliced');
 
 // this line will generate a1 which is the id of the element that I want to affect the opacity of. Think is should read  sliced = elID.slice(0,1) to get first to characters.
 //hmmmm button2 is just a dummy container to look at sliced.
 
 hypeDocument.getElementById('button2').innerHTML = sliced ;
 
 hypeDocument.setElementProperty(x_slice, 'opacity', 0.5, 2.0, 'easeout');

// if I replace x_slice with a1 all works. Really want to generalize this if I can.

Check what sliced is in the console. using

var sliced = elID.slice(0,2);
console.log(sliced);

Also can you post the project.

I think I have found a work around.

Not sure why you have to find a work around. If you just supply your document we can give you a solution and see why you want to do what you want to do in the first place.

Also,

The line above is wrong it should be

var x_slice = hypeDocument.getElementById(sliced);
1 Like

Ok thanks, that sounds like good protocol. I will be traveling for the next little while. Will get back to you. I really appreciate such a collaborative spirit.