Using HTML/Javascript to draw an oval

Question

I am working on a website for class and we are supposed to pass in arguments for the major and minor axes. I can pass it in, but I cannot convert it to an int. I've read every other article on SO I can find, and I understand I need to use vr major = parseInt(), but when I do, I get nothing in my oval. If you look at my code below, you will see that I call parseInt twice, but when I put them into the call to drawEllipse(), it doesn't draw anything (as opposed to when I leave hard coded values in the call, and it does draw as it is supposed to. Can anyone help me with this? Thanks! Some code has been edited out for readability, but it's nothing to do with the function.

Code is:

<form action="Response.html" method="get">
  <section>
    <fieldset>
      <p2>
        <span id="EntireURL"></span>
      </p2>
      <p style="color: black">
        Major Axis: <span id="MajorAxis"></span>
        <br/>Minor Axis: <span id="MinorAxis"></span>
      </p>

      <p>
        <canvas id="thecanvas" width="500" height="350"></canvas>

        <script>
          var major = parseInt(MajorAxis);
          var minor = parseInt(MinorAxis);
          var canvas = document.getElementById('thecanvas');

          if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            drawEllipse(ctx, 10, 10, 100, 60);
          }

          function drawEllipseByCenter(ctx, cx, cy, w, h) {
            drawEllipse(ctx, cx - w / 2.0, cy - h / 2.0, w, h);
          }

          function drawEllipse(ctx, x, y, w, h) {
            var kappa = .5522848,
              ox = (w / 2) * kappa, // control point offset horizontal
              oy = (h / 2) * kappa, // control point offset vertical
              xe = x + w, // x-end
              ye = y + h, // y-end
              xm = x + w / 2, // x-middle
              ym = y + h / 2; // y-middle

            ctx.beginPath();
            ctx.moveTo(x, ym);
            ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
            ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
            ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
            ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
            ctx.stroke();
          }
        </script>
      </p>
    </fieldset>
  </section>

  </div>
  <footer>
    Footer: <a href="http:\\www.cnm.edu">Central New Mexico Community College</a>
  </footer>
  <script>
    //Place entire url into inner text when page loads.
    document.getElementById("EntireURL").innerHTML = window.location.href;

     //Get first and last name and place it into page
    document.getElementById("MajorAxis").innerHTML = getParameterByName("majoraxis");
    document.getElementById("MinorAxis").innerHTML = getParameterByName("minoraxis");

     //Obtained from stackoverflow: http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
    function getParameterByName(name, url) {
      if (!url) url = window.location.href;
      name = name.replace(/[\[\]]/g, "\\$&");
      var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
      if (!results) return null;
      if (!results[2]) return '';
      return decodeURIComponent(results[2].replace(/\+/g, " "));

      var major = parseInt(MajorAxis);
      var minor = parseInt(MinorAxis);
    }
  </script>

</form>
</body>

</html>

Answer 1

You have several problems with your code.

• your function getParametersByName is setting local variables major and minor. Not only are these local variables not accessible outside the function, but this code is after the return statement, so will never excuted.
• That function is meant to get values from the URL query string. Are you passing values in the querystring?

• The initial assignment of major and minor (below) looks to me like you should be calling getParametersByName instead of parseInt

  var major = parseInt(MajorAxis);

  var minor = parseInt(MinorAxis);

• MajorAxis and MinorAccess should be defined as variables in your javascript, if you are going to use them they way you are.

You need to have straight in your own mind where you are getting values from (query string, markup, previously stored in variable). Also, it looks like you may be confused about what is executed when. I say that because I notice you have code that executes in the first script block, then again in the second script block. Not a put down, I realize you are learning.

I can give some more suggestions, but see if you can figure it out from what I have provided.

Answer 2

Two main major issues with the code prevent it working.

1. The sequence of execution is incorrect. The first script element executes before the second and tries to get values from within span elements. The second script executes afterwards and sets values within the span elements. So place the first script element after the second to set span contents before retrieving them - or execute both, in correct order, after the window has finished loading.

2. parseInt(MajorAxis) and parseInt(MinorAxis) access the HTMLSpanElements using (HTML5) named access on the window object. The text content of the element still needs to be accessed, for example by using parseInt(MajorAxis.textContent) and parseInt(MinorAxis.textContent).

Using named access on the window object was introduced by Microsoft IE and may be regarded as unsafe or bad coding style by some.

If you fix both these issues the code should work. Up to you if you wish to modify how the elements are accessed and remove unused variable declarations.