Question

我正在尝试使用特定功能的输出通过innerHTML更改页面内容。

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）时，程序将返回a。

我尽了一切努力，但是无法解决问题。同样奇怪的是，该算法可以在在线js游乐场中运行并正确计算gcd。

我正确使用了.innerHTML还是发生了Java脚本问题？

反正有没有用打印语句调试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

您的变量“结果”是一个字符串。您的函数什么都不算。只代表您的字符串，其中是：“ =” + 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;
}

您可以在以下Codepen上试用：https://codepen.io/josephrexme/pen/EzYJBP

innerHTML显示Javascript函数结果

3 个答案: