Change text of button to value of input text

I want to copy the value of the input text to a button that is clicked. Eventually, there will be about 64 buttons per scene. Can it be done using one function? I don't really want to have to create 64 functions.

Screen Shot 2020-07-24 at 1.59.05 PM

Yeah, one function can be reused to grab the ID of the element clicked and then take action accordingly. Here are several examples...

https://photics.com/free-template-tuesday-11-tumult-hype-multilingual/

https://photics.com/free-template-tuesday-22-tumult-hype-menu/

https://photics.com/free-template-tuesday-24-tumult-hype-clicky/

https://photics.com/free-template-tuesday-31-tumult-hype-navigating/

Using "Clicky" as the example, a simple way is to leverage Hype's "element" function parameter.

// element - DOMHTMLElement that triggered this function being called

// event - event that triggered this function being called

function clicky(hypeDocument, element, event) {

// This is the main example from the book

hypeDocument.getElementById("Text").innerHTML = element.id;

When the function is executed, and if it was an element action that caused the execution, that element's data is available. Simply use... element.id ...to get the name of the element and then you can do a whole bunch of stuff based on what was clicked. JavaScript is needed though, but the free templates show examples of what's possible.

It's a good idea to give your elements good names though. That way, it's easier to identify the elements. Hype generates random IDs otherwise, which makes this technique not as practical.

2 Likes

I may be wrong but just to clarify ... you want the input text to populate the button text when that particular button is clicked?

Example: Type "Hello" into the input element and when you click "Btn 1" the text in that button would change to "Hello"?

If this is the case then

var inputText = document.querySelector("#inputElement").value; // for ID or ".inputElement" for class selector
element.innerText = inputText;

Simples! :smiley:

3 Likes

YES! That worked! Thank you so much!

It wasn't what I was looking for but I learned a lot just by playing around with it. Thank you!