CODEWITHSUNDEEP
javascriptjqueryhtmlkineticjs
user2397282
user2397282

Reputation: 3818

Set HTML input value using Kinetic.js

I want to set the value of an HTML input box when the user clicks, usign Kinetic.js.

This is the input box:

<input type="text" id="text_box">

and this is the method

stage.on('mousedown touchstart', function(evt) {
var shape = evt.targetNode;
if (shape) {
  if (shape.getFill() == 'green') { 
    // this is where the text box value should be changed.
    // I tried this:
    $("#text_box").val("hello");
  }     
}
  });

It doesn't seem to work.

How can I do this?

Upvotes: 0

Views: 134

Answers (2)

Pierre
Pierre

Reputation: 19081

You might want to bind your listener on the shape itself rather than the stage.

For instance: 

var layer = new Kinetic.Layer();
var shape = new Kinetic.Circle({ /*... */ });

shape.on('mousedown touchstart', function(e){
  var that = e.targetNode;
  // ..
});

layer.add(shape);

Check out this example.

Upvotes: 1

WBO Co.
WBO Co.

Reputation: 255

This should target the text box in your DOM.

document.getElementById("text_box").setAttribute("value","hello");

or

document.getElementById("text_box").value = "hello";

Upvotes: 0

Related Questions