Javascript onchange problem

Hi everyone,

I am developing a web page for an embedded application. I created a text box for entering a value (only 1 byte long). The onchange event triggers correctly when I enter the value from a keyboard and press enter. However, it doesn't seem to fire when a javacript (a slider in this case) modifies the text box's value. I have tried:

Expand|Select|Wrap|Line Numbers

 document.getElementById("sd1").fireEvent("onchange"); and,

document.getElementById("sd1").onchange();

but none seems to work. The complete code is shown below. Please advice. Thank you in advance.
James

~inc:header.inc~
[HTML]<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="StyleSheet" href="css/bluecurve.css" />

<script type="text/javascript" src="js/range.js"></script>
<script type="text/javascript" src="js/timer.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>

<p>Vertical Slider</p>
<div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1"/>
</div>

<form method="get" action="demo.htm">
<div>
<p>
Value:<input id="sd1" name="sdr1" style="color:white" onchange="s.setValue(parseInt(this.value))"/>
</p>
</div>
</form>

<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"), "vertical");

s.onchange = function () {
document.getElementById("sd1").value = s.getValue();

document.getElementById("sd1").fireEvent("onchange "); --> THIS DOES NOT WORK
document.getElementById("sd1").onchange(); --> THIS DOES NOT WORK
};
s.setValue(50);

window.onresize = function () {
s.recalculate();
};
</script>
<p>[/HTML]
~inc:footer.inc~

Feb 29 '08 #1

Follow Post Reply

8540

acoder

16,027

Expert Mod 8TB

See this link - section on manually firing events.

Mar 1 '08 #2

traineeirishprogrammer

Hi everyone,

I am developing a web page for an embedded application. I created a text box for entering a value (only 1 byte long). The onchange event triggers correctly when I enter the value from a keyboard and press enter. However, it doesn't seem to fire when a javacript (a slider in this case) modifies the text box's value. I have tried:

Expand|Select|Wrap|Line Numbers

document.getElementById("sd1").fireEvent("onchange"); and,

document.getElementById("sd1").onchange();

but none seems to work. The complete code is shown below. Please advice. Thank you in advance.
James

~inc:header.inc~
[HTML]<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="StyleSheet" href="css/bluecurve.css" />

<script type="text/javascript" src="js/range.js"></script>
<script type="text/javascript" src="js/timer.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>

<p>Vertical Slider</p>
<div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1"/>
</div>

<form method="get" action="demo.htm">
<div>
<p>
Value:<input id="sd1" name="sdr1" style="color:white" onchange="s.setValue(parseInt(this.value))"/>
</p>
</div>
</form>

<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"), "vertical");

s.onchange = function () {
document.getElementById("sd1").value = s.getValue();

document.getElementById("sd1").fireEvent("onchange "); --> THIS DOES NOT WORK
document.getElementById("sd1").onchange(); --> THIS DOES NOT WORK
};
s.setValue(50);

window.onresize = function () {
s.recalculate();
};
</script>
<p>[/HTML]
~inc:footer.inc~

why exactly do you need to use the

document.getElementById("sd1").onchange();

at all.

anyway if you are using this you need to assign it to a function . onchange is not a function itself

Mar 2 '08 #3

acoder

16,027

Expert Mod 8TB

onchange is not a function itself

It might not be, but it can point to a function object - see An Introduction to Function Objects.

Mar 2 '08 #4

traineeirishprogrammer

Yeah I know that. Its an event.

Basically you can point to the function when an event occurs not an invocation.

i.e

document.getElementById("test").onclick = function()
{
alert(this.id);
};

Mar 4 '08 #5

acoder

16,027

Expert Mod 8TB

document.getElementById("test").onclick = function()
{
alert(this.id);
};

Yes, now try this: document.getElementById("test").onclick();

Mar 4 '08 #6

traineeirishprogrammer

Yes I Know that I am declaring a reference to the function .

Mar 8 '08 #7

Javascript onchange problem

Post your reply

Similar topics