innerHTML 显示 Javascript 函数结果答案

【问题标题】：innerHTML to display Javascript function resultinnerHTML 显示 Javascript 函数结果
【发布时间】：2019-05-04 16:45:27
【问题描述】：

我正在尝试使用特定函数的输出更改带有 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 或者是否有任何 Javascript 故障？

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

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

【问题讨论】：

chrome 上的 F12 应该打开 devtools
您可以在 python 3 中使用 console.log() 和 print() 一样在 JavaScript 中进行调试。还有一个debugger 关键字可以调用以进行调试。并且不要发现您使用 innerHTML 有任何问题。您的代码中的主要问题是，当输入这些数值时，您没有监听任何要获取的事件。您可以使用单击事件、更改事件或某些提交事件。在developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/… 上阅读有关 JavaScript 事件的更多信息
@JosephRex 这听起来像是我要找的，非常感谢。

标签： javascript html innerhtml

【解决方案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?

【讨论】：

【解决方案2】：

您的变量“结果”是一个字符串。你的函数不计算任何东西。只代表你的字符串，其中是：“=” + r[r.length - 2]

r[r.length - 2] 与 r[0] 相同。

r[0] 是一样的 var a = parseInt(document.getElementById('a').value);

【讨论】：

【解决方案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

【讨论】：

谢谢，看起来很棒。我将研究不同的 html/js 特定更改。虽然主要算法的实现有点臃肿，但为了进一步算法计算贝祖定理的 s ant t 值。您能快速评论一下使用 const 优于 var 表单的好处吗？
@Andy const 提供不可变赋值，而 var 不提供。这意味着当您为变量分配了一个值时，您可以确定没有其他值可以重新分配给该变量。但是const 并不一定意味着数据不变性，只是赋值不变性。