Javascript onchange problem

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • James007
    New Member
    • Feb 2008
    • 1
    #1

    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:

    [CODE=javascript]document.getEle mentById("sd1") .fireEvent("onc hange"); and,
    document.getEle mentById("sd1") .onchange();
    [/CODE]
    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.ht m">
    <div>
    <p>
    Value:<input id="sd1" name="sdr1" style="color:wh ite" onchange="s.set Value(parseInt( this.value))"/>
    </p>
    </div>
    </form>

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

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

    document.getEle mentById("sd1") .fireEvent("onc hange"); --> THIS DOES NOT WORK
    document.getEle mentById("sd1") .onchange(); --> THIS DOES NOT WORK
    };
    s.setValue(50);

    window.onresize = function () {
    s.recalculate() ;
    };
    </script>
    <p>[/HTML]
    ~inc:footer.inc ~
    Last edited by acoder; Mar 1 '08, 11:34 AM. Reason: Added code tags
    Tags: window.onresize
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      See this link - section on manually firing events.

        Comment

        • traineeirishprogrammer
          New Member
          • Jul 2007
          • 24
          #3
          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:

          [CODE=javascript]document.getEle mentById("sd1") .fireEvent("onc hange"); and,
          document.getEle mentById("sd1") .onchange();
          [/CODE]
          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.ht m">
          <div>
          <p>
          Value:<input id="sd1" name="sdr1" style="color:wh ite" onchange="s.set Value(parseInt( this.value))"/>
          </p>
          </div>
          </form>

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

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

          document.getEle mentById("sd1") .fireEvent("onc hange"); --> THIS DOES NOT WORK
          document.getEle mentById("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.getEle mentById("sd1") .onchange();

          at all.

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

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              Originally posted by traineeirishpro grammer
              onchange is not a function itself
              It might not be, but it can point to a function object - see An Introduction to Function Objects.

                Comment

                • traineeirishprogrammer
                  New Member
                  • Jul 2007
                  • 24
                  #5
                  Yeah I know that. Its an event.

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

                  i.e

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

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      Originally posted by traineeirishpro grammer
                      document.getEle mentById("test" ).onclick = function()
                      {
                      alert(this.id);
                      };
                      Yes, now try this: document.getEle mentById("test" ).onclick();

                        Comment

                        • traineeirishprogrammer
                          New Member
                          • Jul 2007
                          • 24
                          #7
                          Yes I Know that I am declaring a reference to the function .

                            Comment

                            Previous template Next
                            Working...