help with creating simple event objects

Kelly · Mar 4, 2008

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>

rf · Mar 4, 2008

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;

Kelly · Mar 4, 2008

obj.onClick=SquareMe;

thanks, but I tried that...now the code does not fire when loading or
when clicking on the button...
any other hints?

Lasse Reichstein Nielsen · Mar 4, 2008

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

Bart Van der Donck · Mar 4, 2008

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,

Thomas 'PointedEars' Lahn · Mar 4, 2008

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

Thomas 'PointedEars' Lahn · Mar 4, 2008

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">

Click to expand...

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

Bart Van der Donck · Mar 5, 2008

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">.

Help with code	0	Jun 12, 2022
Please Help?	0	Jul 23, 2022
Help me sort out this script	1	Oct 17, 2023
Help with my responsive home page	2	Dec 14, 2022
Help :(	3	Aug 17, 2021
Need help with stripe payment	0	Oct 2, 2021
What "might" I be doing wrong with this snippet?	6	Sep 25, 2023
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021

help with creating simple event objects

Kelly

rf

Kelly

Lasse Reichstein Nielsen

Bart Van der Donck

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

Bart Van der Donck

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads