help with creating simple event objects


K

Kelly

The code below is meant to allow a user to input a number into a text
box, which is then squared when the button is clicked. However, the
code fires as soon as the browser is loaded (or refreshed) instead of
when the button is clicked. Why?

<html>
<head>
<title>My Test</title>
<script type="text/javascript" language="javascript">
function SquareMe(){
var num = parseInt(document.getElementById("MyText").value);
var Ans = num*num;
document.getElementById("MyAns").innerHTML = Ans;
}
</script>
</head>

<body>
<input type="text" id="MyText" size="3px"/>
<input type="button" id="MyButton" value="CALC"/>
<p id="MyAns"> [Answer] </p>
<script type="text/javascript" language="javascript">
obj = document.getElementById("MyButton");
obj.onClick=SquareMe();
</script>
</body>
</html>
 
Ad

Advertisements

R

rf

Kelly said:
The code below is meant to allow a user to input a number into a text
box, which is then squared when the button is clicked. However, the
code fires as soon as the browser is loaded (or refreshed) instead of
when the button is clicked. Why?
obj.onClick=SquareMe();

obj.onClick=SquareMe;
 
L

Lasse Reichstein Nielsen

rf said:
obj.onClick=SquareMe;

obj.onclick = SquareMe;

That said, you might want to check for the DOM way of adding event listeners:

if (obj.addEventListener) {
obj.addEventListener("click", SquareMe, false);
} else if (obj.attachEvent) { // IE 4
obj.attachEvent("onclick", SquareMe);
} else {
obj.onclick = SquareMe;
}

This has the advantage of allowing more than one onclick event on the
same object (except for when falling back on the last case, which
shouldn't happen for anything newer than approx. Netscape 4).

/L
 
B

Bart Van der Donck

Kelly said:
<html>
<head>
        <title>My Test</title>
 <script type="text/javascript" language="javascript">
function SquareMe(){
        var num = parseInt(document.getElementById("MyText").value);

A better way is to approach it as a form element.

<form name="MyForm" method="get" action="..">
<input type="text" name="MyText" value="">
</form>

And then:

document.forms['MyForm'].elements['MyText'].value
         var Ans = num*num;

var Ans = Math.pow(num, 2);
         document.getElementById("MyAns").innerHTML = Ans;

Same as above.
  }
  </script>
 </head>

<body>
        <input type="text" id="MyText" size="3px"/>

The 'name' and 'value' arguments are required. 'size="3px"' is not
possible; you probably mean 'size="3"' or 'style="width:30px;"'.
        <input type="button" id="MyButton" value="CALC"/>
        <p id="MyAns"> [Answer] </p>
         <script type="text/javascript" language="javascript">
                obj = document.getElementById("MyButton");
                 obj.onClick=SquareMe();
        </script>

Tie the event to the element:

<input type="button" id="MyButton" value="CALC"
onClick="SquareMe()">

Hope this helps,
 
T

Thomas 'PointedEars' Lahn

Lasse said:
obj.onclick = SquareMe;

That said, you might want to check for the DOM way of adding event listeners:
^^^^^^^^^^^
(When will they ever learn?) That's nonsense. `onclick' is a property of
the DOM element object referred to by `obj'. It's just the "DOM-Level-0" way.
if (obj.addEventListener) {
obj.addEventListener("click", SquareMe, false);
} else if (obj.attachEvent) { // IE 4
obj.attachEvent("onclick", SquareMe);
} else {
obj.onclick = SquareMe;
}

This has the advantage of allowing more than one onclick event on the
same object (except for when falling back on the last case, which
shouldn't happen for anything newer than approx. Netscape 4).

However, attachEvent() is evil[tm], as using it is not equivalent to using
addEventListener() or the event handler property (here: `onclick').

The event listeners will be executed in arbitrary order, and `this' does not
refer to the event target if you use attachEvent(). It is best to avoid it,
as the only DOM where it is supported, the MSHTML DOM, also supports
`onclick'. See previous discussions.


PointedEars
 
Ad

Advertisements

T

Thomas 'PointedEars' Lahn

Bart said:
The 'name' and 'value' arguments are required.

They are *not*. The `input' element has no required _attributes_:

http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT

Per DOM Level 2 HTML, elements in collections can be referred to by their
ID. However, using the `name' attribute instead of `id' makes this
backwards-compatible to "DOM Level 0".
'size="3px"' is not possible; you probably mean 'size="3"' or
'style="width:30px;"'.

And type="text" is redundant as it is the default.
<input type="button" id="MyButton" value="CALC"/>
<p id="MyAns"> [Answer] </p>
<script type="text/javascript" language="javascript">

The `language' attribute is unnecessary and deprecated since HTML 4.

OP, JFYI: Can't work. Would assign the return value of SquareMe() to a new
`onClick' property instead. Hence the correction which seem to have gone
without explanation so far.
Tie the event to the element:

<input type="button" id="MyButton" value="CALC"
onClick="SquareMe()">

No need for potentially incompatible and less compressible syntax:

onclick="..."


PointedEars
 
Ad

Advertisements

B

Bart Van der Donck

Thomas said:
And type="text" is redundant as it is the default.

You're confusing war tactics with the actual situation on the
battlefield. Don't use <input> when you mean <input type="text">.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top