• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Set speed rotation with text input filed in html5

Community Beginner ,
Dec 27, 2021 Dec 27, 2021

Copy link to clipboard

Copied

Hi everyone, it's me again😊

 

How can I make a button rotate another object, like this:

 

There is an object, button and input text field:

when I put the number in the input text field and then click the button, it will effect on rotation speed.  Higher numbers that user type in the input text will cause faster rotation. But, in other case, i want to set the object rotate only 10 times not continously.

 

How can I do this using html5? Can anyone tell me the code?

Thanks in advance!

Have a nice day

Sorry, I'm not good in English. Hope you can understand my question😊

Views

371

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Dec 28, 2021 Dec 28, 2021

Hi.

 

Here is a suggestion to get you started:

var root = this;
var yourRotatingInstance = root.yourRotatingInstance;
var yourButton = root.yourButton;
var rotationSpeed = 1;

createjs.Ticker.on("tick", function()
{
	yourRotatingInstance.rotation += rotationSpeed;
});

yourButton.on("click", function()
{
	yourInput = document.getElementById("yourInput");
	
	if (yourInput.value && !isNaN(yourInput.value))
		rotationSpeed = Number(yourInput.value);
});

 

I hope this helps.

 

Regards,

JC

Votes

Translate

Translate
Community Expert ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

Hi.

 

Here is a suggestion to get you started:

var root = this;
var yourRotatingInstance = root.yourRotatingInstance;
var yourButton = root.yourButton;
var rotationSpeed = 1;

createjs.Ticker.on("tick", function()
{
	yourRotatingInstance.rotation += rotationSpeed;
});

yourButton.on("click", function()
{
	yourInput = document.getElementById("yourInput");
	
	if (yourInput.value && !isNaN(yourInput.value))
		rotationSpeed = Number(yourInput.value);
});

 

I hope this helps.

 

Regards,

JC

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

Sorry it's not working. Whenever I change the number in textinput, the speed rotation is still the same

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

You said you wanted the change to be applied when the button is clicked.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

Yes, I want user can control the speed by using text input. But, when I using your code, the speed is still the same even I already change the number in text input. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

It's because you have to change the input and then click the button, like you requested:

"when I put the number in the input text field and then click the button, it will effect on rotation speed."

 

If you want to affect the rotation as you type, you can add an input and/or a change event to the input component.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

Thank you so much, it's work. Sorry for wasting your time answering my question:sparkles:

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

You're welcome!

 

Don't worry. We're here to help.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 12, 2022 Oct 12, 2022

Copy link to clipboard

Copied

Hi. I'm looking at this for a problem of my own. I'm really new to coding so please bear with me. I have a rotating arrow and need to click a button to make it speed up (say, two times). So I used your code but it isn't working. My button is Button01, and rotating instance is Arrow01. Here's the modified code, please can you let me know what I should put in YourInput:

 

var root = this;
var Arrow01 = root.Arrow01;
var Button01 = root.Button01;
var rotationSpeed = 1;

createjs.Ticker.on("tick", function()
{
Arrow01.rotation += rotationSpeed;
});

Button01.on("click", function()
{
yourInput = document.getElementById("yourInput");

if (yourInput.value && !isNaN(yourInput.value))
rotationSpeed = 2(yourInput.value);
});

Thankyou.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 12, 2022 Oct 12, 2022

Copy link to clipboard

Copied

LATEST

@Shem26556013xmq7, please don't post duplicate messages.

 

and see your other post for the answer to your question.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines