More ECMAScript fun!

Behold:

Part of an ASPX page:

<h3>Content</h3>
<script type="text/javascript" src="Write.aspx.js"></script>
<div id="divTxaTools"></div>
<textarea cols="120" rows="20" id="txaContent" runat="server"></textarea>

var txaTools;
var txaContent;

var btnHeightInc, btnHeightDec, btnWidthInc, btnWidthDec;

window.onload = function() {
	
	txaTools = document.getElementById("divTxaTools");
	txaContent = document.getElementById("txaContent");
	
	btnHeightInc = document.createElement("button");
	btnHeightDec = document.createElement("button");
	btnWidthInc  = document.createElement("button");
	btnWidthDec  = document.createElement("button");
	
	btnHeightInc.innerHTML = "Increase Height";
	btnHeightDec.innerHTML = "Decrease Height";
	btnWidthInc.innerHTML  = "Increase Width";
	btnWidthDec.innerHTML  = "Decrease Width";
	
	btnHeightInc.type = "button";
	btnHeightDec.type = "button";
	btnWidthInc.type  = "button";
	btnWidthDec.type  = "button";
	
	btnHeightInc.onclick = HeightIncrease();
	btnHeightDec.onclick = HeightDescrease();
	btnWidthInc.onclick  = WidthIncrease();
	btnWidthDec.onclick  = WidthDecrease();
	
	txaTools.appendChild(btnHeightInc);
	txaTools.appendChild(btnHeightDec);
	txaTools.appendChild(btnWidthInc);
	txaTools.appendChild(btnWidthDec);
	
}

function HeightIncrease() {
	txaContent.Rows = txaContent.Rows + 1;
}
function HeightDescrease() {
	txaContent.Rows = txaContent.Rows - 1;
}
function WidthIncrease() {
	txaContent.Cols = txaContent.Cols + 1;
}
function WidthDecrease() {
	txaContent.Cols = txaContent.Cols - 1;
}

Here's a fixed version.

Case sensitivity is important to Firefox.

There's no such attribute as "type" on a <button>, which broke IE.

Maurits wrote:

Here's a fixed version.

Case sensitivity is important to Firefox.

Maurits wrote:

There's no such attribute as "type" on a <button>, which broke IE.

Re: case sensitivity:
.rows != .Rows
.cols != .Cols

Re: <button type=button>... Well, I learned something new today. But if you uncomment those ".type = 'button'" lines, IE doesn't work anymore.

Also, onclick takes functions, not the returned value of a function call... .onclick = HeightDecrease; rather than .onclick = HeightDecrease();

(I think onclick can take strings too, but I'm not sure.)

Maurits wrote:

Re: case sensitivity:
.rows != .Rows
.cols != .Cols

Re: <button type=button>... Well, I learned something new today. But if you uncomment those ".type = 'button'" lines, IE doesn't work anymore.

if(!document.all) {
    btnHeightInc.type = "button";
    etc...
}

I see, the default action for a <button> is to submit the form!  That's nasty.

If you make your onclick functions return false, would that cancel the click, and therefore the submit?

Maurits wrote:

I see, the default action for a <button> is to submit the form!  That's nasty.

If you make your onclick functions return false, would that cancel the click, and therefore the submit?

MSDN article on <button>'s type attribute... IE does recognize it, but there are two caveats:

1) The property is read-only... no changing it from the DOM.
2) The default value is not type="submit", but type="button".

The first caveat is a minor annoyance.
The second caveat is an out-and-out violation of the spec.

Perhaps something like
if (b.type != "button") { b.type = "button"; } // stupid IE makes this read-only

is the safest way to go?

Went to add this issue to the IE Feedback Wiki but it's already there:

The default type value of <button> should be submit in IE 6, not "button". Submit is the default value for <button> in HTML 4.01 spec. 'submit: Creates a submit button. This is the default value.'

Have your tried:

object.setAttribute("type", "button");

Maurits wrote:

I see, the default action for a <button> is to submit the form!  That's nasty.

If you make your onclick functions return false, would that cancel the click, and therefore the submit?

W3bbo wrote:

Behold:


The referenced ECMAScript file:

	
	btnHeightInc.onclick = HeightIncrease();
	btnHeightDec.onclick = HeightDescrease();
	btnWidthInc.onclick  = WidthIncrease();
	btnWidthDec.onclick  = WidthDecrease();
	

I can't believe the thread has gone on this long without anyone mentioning the spelling mistake:

btnHeightDec.onclick = HeightDescrease();
                                                   ^

Cider wrote:

I can't believe the thread has gone on this long without anyone mentioning the spelling mistake:

btnHeightDec.onclick = HeightDescrease();
                                                   ^

I know, but didn't your mother tell you, two wrongs don't make a right...

As long as it's mis-spelled the same way every time... (see RFC 2616 14.36)

Maurits wrote:

As long as it's mis-spelled the same way every time... (see RFC 2616 14.36)

W3bbo wrote:

Maurits wrote:As long as it's mis-spelled the same way every time... (see RFC 2616 14.36)

Question:

How the heck did that mistake make it through to HTTP1.1?