J
james007.mailbox
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:
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~
<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>
~inc:footer.inc~
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:
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~
<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>
~inc:footer.inc~