innerHTML 显示 Javascript 函数结果

Question

我正在尝试使用特定函数的输出通过内部HTML更改页面内容。

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>

无论什么算法似乎都不会修改列表r=[a,b]。因此当调用 r[r.length - 2]（应该是 gcd）程序时 returns a.

我尝试了所有方法，但无法弄清楚哪里出了问题。同样奇怪的是，该算法在在线 js 操场上运行并正确计算 gcd。

我使用 .innerHTML 是否正确或有任何 Javascript 错误？

有没有办法用 print 语句调试 js 代码（例如 python）？

HTML 和 js 的新手，感谢您的帮助。

Answer 1

您没有正确解析 int 值。使用 parseInt 获取 var a 和 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>

而且，您可以直接从浏览器的控制台调试 javascript 代码。阅读更多 How can I debug my JavaScript code?

Answer 2

您的变量 "result" 是一个字符串。你的功能不计算任何东西。只代表你的字符串，其中： "= " + r[r.length - 2]

r[r.length - 2] 与 r[0].

相同

r[0] 与 var a = parseInt(document.getElementById('a').value);

相同

Answer 3

由于您是 HTML/JS 的新手，我想我应该向您展示一种更简洁的解决问题的方法。

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

您可以在这个代码笔上试用：https://codepen.io/josephrexme/pen/EzYJBP

innerHTML 显示 Javascript 函数结果

innerHTML to display Javascript function result

html

javascript

innerhtml