By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,855 Members | 1,970 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,855 IT Pros & Developers. It's quick & easy.

Javascript onchange problem

P: 1
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~
Feb 29 '08 #1
Share this Question
Share on Google+
6 Replies


acoder
Expert Mod 15k+
P: 16,027
See this link - section on manually firing events.
Mar 1 '08 #2

P: 24
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
Mar 2 '08 #3

acoder
Expert Mod 15k+
P: 16,027
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

P: 24
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
Expert Mod 15k+
P: 16,027
document.getElementById("test").onclick = function()
{
alert(this.id);
};
Yes, now try this: document.getElementById("test").onclick();
Mar 4 '08 #6

P: 24
Yes I Know that I am declaring a reference to the function .
Mar 8 '08 #7

Post your reply

Sign in to post your reply or Sign up for a free account.