How do I run this function If I click on the button?

<button id="button">Button</button>

var tween = new TWEEN.Tween(mesh.scale).to({ x: 1, y: 0.05, z:2 }, 1000).start();


tween.easing(TWEEN.Easing.Elastic.InOut);
tween.repeat(Infinity);
tween.yoyo(true);

How do I run this function If I click on the button?

<button id="button">Button</button>

var tween = new TWEEN.Tween(mesh.scale).to({ x: 1, y: 0.05, z:2 }, 1000).start();


tween.easing(TWEEN.Easing.Elastic.InOut);
tween.repeat(Infinity);
tween.yoyo(true);

• javascript
• jquery

Share Improve this question Follow asked Oct 30, 2015 at 19:14 Arthur S.Arthur S. 31711 gold badge22 silver badges1313 bronze badges 1

• 3 Have you even tried google./search?q=how+to+run+a+function+on+button+click ? – Javier Conde Commented Oct 30, 2015 at 19:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The problem here is that you want to be able to run your JavaScript code when you click the button. The solution to this is to create a function, then set the 'onclick' property of the button to the name of your function. Like this:

<button id="button" onclick="functionName()">Button</button>

<script>
function functionName ()
{
var tween = new TWEEN.Tween(mesh.scale).to({ x: 1, y: 0.05, z:2 }, 1000).start();
tween.easing(TWEEN.Easing.Elastic.InOut);
tween.repeat(Infinity);
tween.yoyo(true);
}
</script>

The onclick attribute on a button will accept a JavaScript function to call whenever it is clicked, like so:

<button id="button" type="button" onclick="functionToCall">Button</button>

<script>
  function functionToCall() {
     // ...
  }
</script>

However, it is often better to attach an eventListener to the button, like so:

<button id="button" type="button">Button</button>

<script>
    // Plain JS
    document.getElementById('button').addEventListener('click', function() {
      // ...
    });

    // jQuery
    $('#button').click(function() {
      // ...
    });
</script>

Using the onclick attribute will overwrite any previously attached listeners, and in modern applications it is mon to see multiple event handlers associated with an DOM node.

Using addEventListener will ensure that the previously attached handlers remain in tact and can executed at the same time.

There is also a removeEventListener method that can be used to stop execution of a function when an event is triggered if you ever need to do something only once. In those instances, it is mon to use a named function instead of an anonymous function like the one in my previous example.

document.getElementById("button").addEventListener("click", clickHandlerOnce);
function clickHandlerOnce() {
   // ...
   this.removeListener("click", clickHandlerOnce);
}

Using jQuery:

$('#button').click(function(){
   var tween = new TWEEN.Tween(mesh.scale).to({ x: 1, y: 0.05, z:2 }, 1000).start();
   tween.easing(TWEEN.Easing.Elastic.InOut);
   tween.repeat(Infinity);
   tween.yoyo(true);
   return false; //if you want the button to not process anything further
});