Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Web Development
  3. JavaScript
  4. Javascript function error.

Javascript function error.

Scheduled Pinned Locked Moved JavaScript
javascripthtmlhelpquestion
30 Posts 6 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A and180y

    Can anyone point me in the right direction with this please? I have these inputs and below a function to give me the hours open, except it doesn't. I've tried putting the function in online checkers and all is okay according to them but it doesn't calculate. Thanks in advance. <div class='col-sm-2 mb-2'> <input type='text' id='opening-time' class='form-control' data-calc='openingTime' value='00.00' tabindex='-1'> </div> <div class='col-sm-2 mb-2'> <input type='text' id='closing-time' class='form-control' data-calc='closingTime' value='00.00' tabindex='-1'> </div> <div class='col-sm-2 mb-2'> <input type='text' id='hoursOpen' class='form-control form-output' data-calc='hoursOpen' value='00.00'readonly tabindex='-1'> </div> </div>

    $(function(){
    $("#closingTime").keyup(function(){
    var openingTime = $("#openingTime").val();
    var closingTime = $("#closingTime").val();
    $("hoursOpen").html(closingTime-openingTime);
    })
    })

    J Offline
    J Offline
    jkirkerx
    wrote on last edited by
    #19

    I know I'm late on this, but 0 - 0 is 0 opening time is 0 or 12 midnight closing time is 0 or 12 midnight so you get 0

    If it ain't broke don't fix it Discover my world at jkirkerx.com

    A 1 Reply Last reply
    0
    • J jkirkerx

      I know I'm late on this, but 0 - 0 is 0 opening time is 0 or 12 midnight closing time is 0 or 12 midnight so you get 0

      If it ain't broke don't fix it Discover my world at jkirkerx.com

      A Offline
      A Offline
      and180y
      wrote on last edited by
      #20

      I was just glad the code worked. :) :)

      J 2 Replies Last reply
      0
      • A and180y

        I was just glad the code worked. :) :)

        J Offline
        J Offline
        jkirkerx
        wrote on last edited by
        #21

        :) I wrote a similar function for showing that my business is open, based on open and closed hours in TypeScript. It drove me nuts, was always off by an hour, Daylight savings. I'll get back to it soon, now that I have more experience in TypeScript. :(

        setStoreHours(): void {
        const date = new Date();
        const newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
        const offset = date.getTimezoneOffset() / 60;
        this.hourOfDay = date.getHours();
        this.dayOfWeek = date.getDay();
        switch (this.dayOfWeek) {
        case 0:
        // Sunday
        this.storeStatus = "Closed";
        break;
        case 1:
        // Monday
        if (this.hourOfDay > 8 && this.hourOfDay < 17) {
        this.storeStatus = "Open";
        }
        break;
        case 2:
        // Tuesday
        if (this.hourOfDay > 8 && this.hourOfDay < 17) {
        this.storeStatus = "Open";
        }
        break;
        case 3:
        // Wednesday
        if (this.hourOfDay > 8 && this.hourOfDay < 17) {
        this.storeStatus = "Open";
        }
        break;
        case 4:
        // Thursday
        if (this.hourOfDay > 8 && this.hourOfDay < 17) {
        this.storeStatus = "Open";
        }
        break;
        case 5:
        // Friday
        if (this.hourOfDay > 8 && this.hourOfDay < 15) {
        this.storeStatus = "Open";
        }
        break;
        case 6:
        // Saturday
        this.storeStatus = "Closed";
        break;
        default:
        this.storeStatus = "Closed";
        }
        }

        If it ain't broke don't fix it Discover my world at jkirkerx.com

        A 2 Replies Last reply
        0
        • J jkirkerx

          :) I wrote a similar function for showing that my business is open, based on open and closed hours in TypeScript. It drove me nuts, was always off by an hour, Daylight savings. I'll get back to it soon, now that I have more experience in TypeScript. :(

          setStoreHours(): void {
          const date = new Date();
          const newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
          const offset = date.getTimezoneOffset() / 60;
          this.hourOfDay = date.getHours();
          this.dayOfWeek = date.getDay();
          switch (this.dayOfWeek) {
          case 0:
          // Sunday
          this.storeStatus = "Closed";
          break;
          case 1:
          // Monday
          if (this.hourOfDay > 8 && this.hourOfDay < 17) {
          this.storeStatus = "Open";
          }
          break;
          case 2:
          // Tuesday
          if (this.hourOfDay > 8 && this.hourOfDay < 17) {
          this.storeStatus = "Open";
          }
          break;
          case 3:
          // Wednesday
          if (this.hourOfDay > 8 && this.hourOfDay < 17) {
          this.storeStatus = "Open";
          }
          break;
          case 4:
          // Thursday
          if (this.hourOfDay > 8 && this.hourOfDay < 17) {
          this.storeStatus = "Open";
          }
          break;
          case 5:
          // Friday
          if (this.hourOfDay > 8 && this.hourOfDay < 15) {
          this.storeStatus = "Open";
          }
          break;
          case 6:
          // Saturday
          this.storeStatus = "Closed";
          break;
          default:
          this.storeStatus = "Closed";
          }
          }

          If it ain't broke don't fix it Discover my world at jkirkerx.com

          A Offline
          A Offline
          and180y
          wrote on last edited by
          #22

          Where's the best place to learn how to write functions and class functions. I've ran through the courses Richard suggested above but none seem to be taking me where I need to be or am I trying to walk before I can run? :-) To me this should run but it's not returning a value, (or I'm not grasping how to get it to do so)

          $(function(){
          $("#current-charge").keyup(function(){
          var time = $("#time-allowed").val();
          var current = $("#current-charge").val();
          $("breakeven").html(time * current);
          })
          })

          1 Reply Last reply
          0
          • A and180y

            I was just glad the code worked. :) :)

            J Offline
            J Offline
            jkirkerx
            wrote on last edited by
            #23

            That's JQuery like syntax. IMO, Don't waste your time learning JQuery, I've been there and done that already. JQuery is obsolete now, because modern browsers support modern JavaScript. JQuery adds 3 Lbs to your first page download, and is very heavy in weight, in exchange to write shorthand JavaScript. The reason your not absorbing or moving faster with knowledge is because your looking at shorthand JavaScript/JQuery examples, and trying to understand and copy them. These are very advanced writing skills. You should start with entry level skill writing, and when you get that down, move to shorthand. I would of wrote it like this, for a beginner example. ES6 Use HTML to bind the event to the button, and run calcTime(). Use camel case to label things eg. calcTime vs CalcTime vs calc-time let has replaced var use const instead of var or let to when something that is constant. Try not to make a lot of const, see how I did it in one line ES6 Example

            Calculate

            function calcTime() {

            // Make references to input elements
            const time = document.getElementById("currentCharge"),
            current = document.getElementById("timeAllowed"),
            breakEven = document.getElementById("breakEven");

            // Get the element values, convert to number/float
            // By default, values are strings, and don't do math well.
            let t = parseFloat(time.value);
            let c = parseFloat(current.value);

            // Perform the equation
            let bE = t * c;

            // Output the equation
            breakEven.innerHTML = bE.toString();

            }

            JavaScript comes in many flavors now. I think you want ECMAScript 6, ES6, ECMAScript 2015 From there, you can branch out to TypeScript, Node, etc. I don't know of a good learning course, but you need to stick to one version in order to learn. And when searching for help on the internet, find examples in ES6; learn to identity ES6 examples, and then code and test.

            If it ain't broke don't fix it Discover my world at jkirkerx.com

            A 1 Reply Last reply
            0
            • J jkirkerx

              :) I wrote a similar function for showing that my business is open, based on open and closed hours in TypeScript. It drove me nuts, was always off by an hour, Daylight savings. I'll get back to it soon, now that I have more experience in TypeScript. :(

              setStoreHours(): void {
              const date = new Date();
              const newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
              const offset = date.getTimezoneOffset() / 60;
              this.hourOfDay = date.getHours();
              this.dayOfWeek = date.getDay();
              switch (this.dayOfWeek) {
              case 0:
              // Sunday
              this.storeStatus = "Closed";
              break;
              case 1:
              // Monday
              if (this.hourOfDay > 8 && this.hourOfDay < 17) {
              this.storeStatus = "Open";
              }
              break;
              case 2:
              // Tuesday
              if (this.hourOfDay > 8 && this.hourOfDay < 17) {
              this.storeStatus = "Open";
              }
              break;
              case 3:
              // Wednesday
              if (this.hourOfDay > 8 && this.hourOfDay < 17) {
              this.storeStatus = "Open";
              }
              break;
              case 4:
              // Thursday
              if (this.hourOfDay > 8 && this.hourOfDay < 17) {
              this.storeStatus = "Open";
              }
              break;
              case 5:
              // Friday
              if (this.hourOfDay > 8 && this.hourOfDay < 15) {
              this.storeStatus = "Open";
              }
              break;
              case 6:
              // Saturday
              this.storeStatus = "Closed";
              break;
              default:
              this.storeStatus = "Closed";
              }
              }

              If it ain't broke don't fix it Discover my world at jkirkerx.com

              A Offline
              A Offline
              and180y
              wrote on last edited by
              #24

              Sorry, I think I deleted my reply just as you replied to it. :sigh: :doh: :doh:

              J 1 Reply Last reply
              0
              • A and180y

                Sorry, I think I deleted my reply just as you replied to it. :sigh: :doh: :doh:

                J Offline
                J Offline
                jkirkerx
                wrote on last edited by
                #25

                That's JQuery like syntax. IMO, Don't waste your time learning JQuery, I've been there and done that already. JQuery is obsolete now, because modern browsers support modern JavaScript. JQuery adds 3 Lbs to your first page download, and is very heavy in weight, in exchange to write shorthand JavaScript. The reason your not absorbing or moving faster with knowledge is because your looking at shorthand JavaScript/JQuery examples, and trying to understand and copy them. These are very advanced writing skills. You should start with entry level skill writing, and when you get that down, move to shorthand. I would of wrote it like this, for a beginner example. ES6 Use HTML to bind the event to the button, and run calcTime(). Use camel case to label things eg. calcTime vs CalcTime vs calc-time let has replaced var use const instead of var or let to when something that is constant. Try not to make a lot of const, see how I did it in one line ES6 Example

                Calculate

                function calcTime() {

                // Make references to input elements
                const time = document.getElementById("currentCharge"),
                current = document.getElementById("timeAllowed"),
                breakEven = document.getElementById("breakEven");

                // Get the element values, convert to number/float
                // By default, values are strings, and don't do math well.
                let t = parseFloat(time.value);
                let c = parseFloat(current.value);

                // Perform the equation
                let bE = t * c;

                // Output the equation
                breakEven.innerHTML = bE.toString();

                }

                JavaScript comes in many flavors now. I think you want ECMAScript 6, ES6, ECMAScript 2015 From there, you can branch out to TypeScript, Node, etc. I don't know of a good learning course, but you need to stick to one version in order to learn. And when searching for help on the internet, find examples in ES6; learn to identity ES6 examples, and then code and test.

                If it ain't broke don't fix it Discover my world at jkirkerx.com

                1 Reply Last reply
                0
                • J jkirkerx

                  That's JQuery like syntax. IMO, Don't waste your time learning JQuery, I've been there and done that already. JQuery is obsolete now, because modern browsers support modern JavaScript. JQuery adds 3 Lbs to your first page download, and is very heavy in weight, in exchange to write shorthand JavaScript. The reason your not absorbing or moving faster with knowledge is because your looking at shorthand JavaScript/JQuery examples, and trying to understand and copy them. These are very advanced writing skills. You should start with entry level skill writing, and when you get that down, move to shorthand. I would of wrote it like this, for a beginner example. ES6 Use HTML to bind the event to the button, and run calcTime(). Use camel case to label things eg. calcTime vs CalcTime vs calc-time let has replaced var use const instead of var or let to when something that is constant. Try not to make a lot of const, see how I did it in one line ES6 Example

                  Calculate

                  function calcTime() {

                  // Make references to input elements
                  const time = document.getElementById("currentCharge"),
                  current = document.getElementById("timeAllowed"),
                  breakEven = document.getElementById("breakEven");

                  // Get the element values, convert to number/float
                  // By default, values are strings, and don't do math well.
                  let t = parseFloat(time.value);
                  let c = parseFloat(current.value);

                  // Perform the equation
                  let bE = t * c;

                  // Output the equation
                  breakEven.innerHTML = bE.toString();

                  }

                  JavaScript comes in many flavors now. I think you want ECMAScript 6, ES6, ECMAScript 2015 From there, you can branch out to TypeScript, Node, etc. I don't know of a good learning course, but you need to stick to one version in order to learn. And when searching for help on the internet, find examples in ES6; learn to identity ES6 examples, and then code and test.

                  If it ain't broke don't fix it Discover my world at jkirkerx.com

                  A Offline
                  A Offline
                  and180y
                  wrote on last edited by
                  #26

                  Have added some more elements (not in use at present) but still not getting the breakeven to calculate.

                  <div class='col-sm-2 mb-1'>
                  <input type='number' id='time' class='form-control' data-calc='time' placeholder='Minutes Allocated' tabindex='2'>
                  </div>
                  <div class='col-sm-2 mb-2'>
                  <input type='text' id='current' class='form-control form-output' data-calc='current' value='£0.00' tabindex='-1'>
                  </div>
                  <div class='col-sm-2 mb-2'>
                  <input type='text' id='breakeven' class='form-control form-output' data-calc='breakeven' value='£0.00' readonly tabindex='-1'>
                  </div>
                  <div class='col-sm-2 mb-2'>
                  <input type='text' id='tier1' class='form-control form-output' data-calc='tier1' value='£0.00' readonly tabindex='-1'>
                  </div>
                  <div class='col-sm-2 mb-2'>
                  <input type='text' id='tier2' class='form-control form-output' data-calc='tier2' value='£0.00' readonly tabindex='-1'>
                  </div>
                  </div>

                  <button type="button" onBlur="calcTime()">Calculate</button>
                  

                  function calcTime() {

                  // Make references to input elements
                  const time = document.getElementById("timeAllowed"),
                  current = document.getElementById("currentCharge"),
                  breakEven = document.getElementById("breakEven"),
                  tier1 = document.getElementById ("tier1"),
                  tier2= document.getElementById ("tier2");

                  // Get the element values, convert to number/float
                  // By default, values are strings, and don't do math well.
                  let t = parseFloat(time.value);
                  let c = parseFloat(current.value);

                  // Perform the equation
                  let bE = t * c;

                  // Output the equation
                  breakEven.innerHTML = bE.toString();

                  }</pre></x-turndown>

                  L J A 3 Replies Last reply
                  0
                  • A and180y

                    Have added some more elements (not in use at present) but still not getting the breakeven to calculate.

                    <div class='col-sm-2 mb-1'>
                    <input type='number' id='time' class='form-control' data-calc='time' placeholder='Minutes Allocated' tabindex='2'>
                    </div>
                    <div class='col-sm-2 mb-2'>
                    <input type='text' id='current' class='form-control form-output' data-calc='current' value='£0.00' tabindex='-1'>
                    </div>
                    <div class='col-sm-2 mb-2'>
                    <input type='text' id='breakeven' class='form-control form-output' data-calc='breakeven' value='£0.00' readonly tabindex='-1'>
                    </div>
                    <div class='col-sm-2 mb-2'>
                    <input type='text' id='tier1' class='form-control form-output' data-calc='tier1' value='£0.00' readonly tabindex='-1'>
                    </div>
                    <div class='col-sm-2 mb-2'>
                    <input type='text' id='tier2' class='form-control form-output' data-calc='tier2' value='£0.00' readonly tabindex='-1'>
                    </div>
                    </div>

                    <button type="button" onBlur="calcTime()">Calculate</button>
                    

                    function calcTime() {

                    // Make references to input elements
                    const time = document.getElementById("timeAllowed"),
                    current = document.getElementById("currentCharge"),
                    breakEven = document.getElementById("breakEven"),
                    tier1 = document.getElementById ("tier1"),
                    tier2= document.getElementById ("tier2");

                    // Get the element values, convert to number/float
                    // By default, values are strings, and don't do math well.
                    let t = parseFloat(time.value);
                    let c = parseFloat(current.value);

                    // Perform the equation
                    let bE = t * c;

                    // Output the equation
                    breakEven.innerHTML = bE.toString();

                    }</pre></x-turndown>

                    L Offline
                    L Offline
                    Lost User
                    wrote on last edited by
                    #27

                    Look at the id names you are using in the HTML against the ones you are using in the Javascript. You need to read through your code more closely.

                    A 1 Reply Last reply
                    0
                    • A and180y

                      Have added some more elements (not in use at present) but still not getting the breakeven to calculate.

                      <div class='col-sm-2 mb-1'>
                      <input type='number' id='time' class='form-control' data-calc='time' placeholder='Minutes Allocated' tabindex='2'>
                      </div>
                      <div class='col-sm-2 mb-2'>
                      <input type='text' id='current' class='form-control form-output' data-calc='current' value='£0.00' tabindex='-1'>
                      </div>
                      <div class='col-sm-2 mb-2'>
                      <input type='text' id='breakeven' class='form-control form-output' data-calc='breakeven' value='£0.00' readonly tabindex='-1'>
                      </div>
                      <div class='col-sm-2 mb-2'>
                      <input type='text' id='tier1' class='form-control form-output' data-calc='tier1' value='£0.00' readonly tabindex='-1'>
                      </div>
                      <div class='col-sm-2 mb-2'>
                      <input type='text' id='tier2' class='form-control form-output' data-calc='tier2' value='£0.00' readonly tabindex='-1'>
                      </div>
                      </div>

                      <button type="button" onBlur="calcTime()">Calculate</button>
                      

                      function calcTime() {

                      // Make references to input elements
                      const time = document.getElementById("timeAllowed"),
                      current = document.getElementById("currentCharge"),
                      breakEven = document.getElementById("breakEven"),
                      tier1 = document.getElementById ("tier1"),
                      tier2= document.getElementById ("tier2");

                      // Get the element values, convert to number/float
                      // By default, values are strings, and don't do math well.
                      let t = parseFloat(time.value);
                      let c = parseFloat(current.value);

                      // Perform the equation
                      let bE = t * c;

                      // Output the equation
                      breakEven.innerHTML = bE.toString();

                      }</pre></x-turndown>

                      J Offline
                      J Offline
                      jkirkerx
                      wrote on last edited by
                      #28

                      You got it wrong ... You are fresh at this ;) I can't test this at the moment, but it should work. I hope it does.

                      function calcTime() {

                      // Make references to input elements
                      const time = document.getElementById("time"),
                      current = document.getElementById("current"),
                      tier1 = document.getElementById ("tier1"),
                      tier2= document.getElementById ("tier2"),
                      breakEven = document.getElementById("breakEven"),
                      results = document.getElementById("results");

                      // Get the element values, convert to number/float
                      // By default, values are strings, and don't do math well.
                      let t = parseFloat(time.value);
                      let c = parseFloat(current.value);

                      // Perform the equation
                      let bE = t * c;

                      // Output the equation to the span element, remove the comments below
                      console.log("breakEven=", bE); // Diagnostics, hit F12 on your keyboard and select console
                      results.innerHTML = bE.toString(); // innerHTML is for a span tag, value is textbox
                      }

                      Calculate

                      0

                      If it ain't broke don't fix it Discover my world at jkirkerx.com

                      1 Reply Last reply
                      0
                      • A and180y

                        Have added some more elements (not in use at present) but still not getting the breakeven to calculate.

                        <div class='col-sm-2 mb-1'>
                        <input type='number' id='time' class='form-control' data-calc='time' placeholder='Minutes Allocated' tabindex='2'>
                        </div>
                        <div class='col-sm-2 mb-2'>
                        <input type='text' id='current' class='form-control form-output' data-calc='current' value='£0.00' tabindex='-1'>
                        </div>
                        <div class='col-sm-2 mb-2'>
                        <input type='text' id='breakeven' class='form-control form-output' data-calc='breakeven' value='£0.00' readonly tabindex='-1'>
                        </div>
                        <div class='col-sm-2 mb-2'>
                        <input type='text' id='tier1' class='form-control form-output' data-calc='tier1' value='£0.00' readonly tabindex='-1'>
                        </div>
                        <div class='col-sm-2 mb-2'>
                        <input type='text' id='tier2' class='form-control form-output' data-calc='tier2' value='£0.00' readonly tabindex='-1'>
                        </div>
                        </div>

                        <button type="button" onBlur="calcTime()">Calculate</button>
                        

                        function calcTime() {

                        // Make references to input elements
                        const time = document.getElementById("timeAllowed"),
                        current = document.getElementById("currentCharge"),
                        breakEven = document.getElementById("breakEven"),
                        tier1 = document.getElementById ("tier1"),
                        tier2= document.getElementById ("tier2");

                        // Get the element values, convert to number/float
                        // By default, values are strings, and don't do math well.
                        let t = parseFloat(time.value);
                        let c = parseFloat(current.value);

                        // Perform the equation
                        let bE = t * c;

                        // Output the equation
                        breakEven.innerHTML = bE.toString();

                        }</pre></x-turndown>

                        A Offline
                        A Offline
                        and180y
                        wrote on last edited by
                        #29

                        Jkirkerx, not sure why but your post vanished. I tried it but no luck. Going to change a few things so will keep you updated, thanks for your help thus far. :)

                        1 Reply Last reply
                        0
                        • L Lost User

                          Look at the id names you are using in the HTML against the ones you are using in the Javascript. You need to read through your code more closely.

                          A Offline
                          A Offline
                          and180y
                          wrote on last edited by
                          #30

                          Thanks Richard, you were right. In my haste I lost focus. :)

                          1 Reply Last reply
                          0
                          Reply
                          • Reply as topic
                          Log in to reply
                          • Oldest to Newest
                          • Newest to Oldest
                          • Most Votes


                          • Login

                          • Don't have an account? Register

                          • Login or register to search.
                          • First post
                            Last post
                          0
                          • Categories
                          • Recent
                          • Tags
                          • Popular
                          • World
                          • Users
                          • Groups