innerHTML to display Javascript function result

Question

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.

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 https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events — Joseph Rex, May 04 '19 at 17:07
@JosephRex That sounds like what i am looking for, thanks a lot. — , May 04 '19 at 17:20

score 1 · Accepted Answer · answered May 04 '19 at 16:53

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?

score 0 · Answer 2 · answered May 04 '19 at 17:21

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);

score 0 · Answer 3 · answered May 04 '19 at 17:22

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

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? — , May 04 '19 at 23:37
@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. — Joseph Rex, May 05 '19 at 11:46

innerHTML to display Javascript function result

3 Answers3