Connecting Tech Pros Worldwide Forums | Help | Site Map

Javascript onchange problem

Newbie
 
Join Date: Feb 2008
Posts: 1
#1: Feb 29 '08
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
  1. document.getElementById("sd1").fireEvent("onchange"); and,
  2. document.getElementById("sd1").onchange();
  3.  
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~

acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: Mar 1 '08

re: Javascript onchange problem


See this link - section on manually firing events.
Newbie
 
Join Date: Jul 2007
Posts: 26
#3: Mar 2 '08

re: Javascript onchange problem


Quote:

Originally Posted by James007

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
  1. document.getElementById("sd1").fireEvent("onchange"); and,
  2. document.getElementById("sd1").onchange();
  3.  
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
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Mar 2 '08

re: Javascript onchange problem


Quote:

Originally Posted by traineeirishprogrammer

onchange is not a function itself

It might not be, but it can point to a function object - see An Introduction to Function Objects.
Newbie
 
Join Date: Jul 2007
Posts: 26
#5: Mar 4 '08

re: Javascript onchange problem


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);
};
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#6: Mar 4 '08

re: Javascript onchange problem


Quote:

Originally Posted by traineeirishprogrammer

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

Yes, now try this: document.getElementById("test").onclick();
Newbie
 
Join Date: Jul 2007
Posts: 26
#7: Mar 8 '08

re: Javascript onchange problem


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


Similar JavaScript / Ajax / DHTML bytes