2

I am trying to change page content with innerHTML using the output of a specific function.

function euclid() {
      var a = document.getElementById('a');
      var b = document.getElementById('b');
      var r = [a, b]
      var j = 1, s = [1, 0], t = [0, 1], k = ["X"];
      while (r[j] > 0) {
          k.push(Math.floor(r[j-1] / r[j]));
          r.push(r[j-1] - r[j]*k[j]);
          s.push(s[j-1] - s[j]*k[j]);
          t.push(t[j-1] - t[j]*k[j]);
          j++;
      }
      var result = "gcd(" + a.value + ", " + b.value + ") = " + r[r.length - 2].value;
      document.getElementById('res').innerHTML = result;
    }

var go  = document.getElementById('go');
go.addEventListener ('click', euclid, true);
<!DOCTYPE html>

<head>
    <title>Euclids Algorithm</title>
</head>

<body>
    <h2>Euclids Algorithm</h2>

    gcd( <input type="number" id="a"> > <input type="number" id="b"> )
    <button type="button" id="go">Go!</button>
    <p id="res">To see the result please enter two numbers and press go.</p>

    <script src="euclid.js"></script>
</body>

No matter what the algorithm does not seem to modify the list r = [a, b]. Therefore when calling r[r.length - 2] (should be gcd) the program returns a.

I tried everything, but cant get my head around whats wrong. What is weird as well is, that the algorithm works in an online js playground and correctly computes the gcd.

Am I using .innerHTML correctly or are there any Javascript mishaps?

Is there anyway to debug js code with print statements (like python for example)?

New to HTML and js and thankful for any help.

Improve this question
3
  • F12 on chrome should open up devtools Commented May 4, 2019 at 16:52
  • You can use console.log() like print() in python 3 for debugging in JavaScript. There is also a debugger keyword you can call for debugging. And don't see anything wrong with your use of innerHTML. The main problem in your code is that you are not listening for any event to get when those number values have been entered. You can use a click event, change event or some submit event. Read more about events in JavaScript at developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/… Commented May 4, 2019 at 17:07
  • @JosephRex That sounds like what i am looking for, thanks a lot. Commented May 4, 2019 at 17:20

3 Answers 3

Reset to default
1

You are not parsing the int values properly. Use parseInt to get the actual values for var a and b.

function euclid() {
      var a = parseInt(document.getElementById('a').value);
      var b = parseInt(document.getElementById('b').value);
      var r = [a, b]
      var j = 1, s = [1, 0], t = [0, 1], k = ["X"];
      while (r[j] > 0) {
          k.push(Math.floor(r[j-1] / r[j]));
          r.push(r[j-1] - r[j]*k[j]);
          s.push(s[j-1] - s[j]*k[j]);
          t.push(t[j-1] - t[j]*k[j]);
          j++;
      }
      var result = "gcd(" + a+ ", " + b+ ") = " + r[r.length - 2];
      document.getElementById('res').innerHTML = result;
    }

var go  = document.getElementById('go');
go.addEventListener ('click', euclid, true);
<!DOCTYPE html>

<head>
    <title>Euclids Algorithm</title>
</head>

<body>
    <h2>Euclids Algorithm</h2>

    gcd( <input type="number" id="a"> > <input type="number" id="b"> )
    <button type="button" id="go">Go!</button>
    <p id="res">To see the result please enter two numbers and press go.</p>

    <script src="euclid.js"></script>
</body>

And, you can debug javascript code directly from your browser's console. Read more How can I debug my JavaScript code?

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Your variable "result" is a string. Your function not calculate nothing. Only reprezent your string, where is: "= " + r[r.length - 2]

r[r.length - 2] is the same what r[0].

r[0] is the same what var a = parseInt(document.getElementById('a').value);

Improve this answer

Comments

0

Since you're new to HTML/JS I thought I should show you a somewhat cleaner approach to solving the problem.

<h2>Euclids Algorithm</h2>
<p>To see result, enter 2 numbers below:</p>

<form id="entry">
  <input type="number" id="a" />
  <input type="number" id="b" />
  <input type="submit" value="enter numbers" />
</form>

<output id="result"></output>

const entry = document.getElementById('entry');
const a = document.getElementById('a');
const b = document.getElementById('b');
const result = document.getElementById('result');

entry.addEventListener('submit', (e) => {
  e.preventDefault();
  const numberA = Number(a.value);
  const numberB = Number(b.value);
  const euclidValue = euclid(numberA, numberB);
  result.innerHTML = euclidValue;
});

function euclid(first, second) {
  while(second !== 0) {
    const temp = second;
    second = first % second;
    first = temp;
  }
  return first;
}

You can try it out on this codepen: https://codepen.io/josephrexme/pen/EzYJBP

Improve this answer

2 Comments

Thanks, that looks awesome. I will have a look into the different html/js specific changes. Though the main algorithm had to be implemented a little bit bloated, to calculate s ant t values for Bézout's theorem for further algorithms. Can you quickly comment on the benefits of using const over var the form?
@Andy const provides immutable assignment while var does not. This means when you've assigned a value to a variable, you are sure that no other value can be reassigned to that variable. However const doesn't necessarily mean data immutability, just assignment immutability.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.