How to set the value of a text input with MooTools

I have just begun playing with MooTools, and I don't understand why the following happens:

var input = new Element('input');
input.set('type','text');
input.set('value','this is the value');
console.log(input);

results in: <input type=​"text">​, so setting the value hasn't worked.

But if I do this:

var input = new Element('input');
input.set('type','text');
input.set('someValue','this is the value');
console.log(input);

I get the expected result of <input type=​"text" somevalue=​"this is the value">​.

Am I overlooking something, is what I am trying to do not allowed, is this a bug in Chrome (11.0.696.71, OS X) or am I doing something else wrong?

Update: thanks for your answer! You are right, the value is actually being set; console.log(input.get('value')) gives back the proper value and I can see the value in the input field when I append the input object to the DOM.

App开发者_如何学编程arently, the value setting is just not reflected as an attribute of the HTML element, but only stored internally.

Are you sure the value isn't being set?

What do you get when you call: input.get('value')

I tested this (in firefox) and even though the console just logs <input type=​"text"> the value does in fact get set. Try adding the element to the page and you'll see it :)

I've had a similar problem with this 'red herring' which I've since solved, and thought I'd share. I'm trying to make certain cells of a table row editable when the user clicks on the row:

var cells = this.getElements("td");
for (var ix=0;ix<cells.length; ix++){
   if (cells[ix].hasClass("edType_text")){
      var celltext = cells[ix].get("text");
      cells[ix].set('text','');
      var editTag = new Element ('input',{type:'text','value':celltext});
      editTag.inject(cells[ix]); 
   }
}

This seemed to work OK but when I clicked on the cell I couldn't edit it. Firebug and Chrome tools showed the added input tag as

<input type='text'>

instead of the expected:

<input type='text' value='xxxxxx' />

However this is perfectly normal as commented on above.

Spotted the 'deliberate' error ?

Of course when I clicked on the input field it triggered the mouse event on the row again, thus preventing me getting at the input!!!! :-{

To avoid this just add this line of code at the end of the if block:

editTag.addEvent("mousedown",function(event){event.stopPropagation();});