innerHTML для отображения результата функции Javascript - PullRequest
Новая
       10

innerHTML для отображения результата функции Javascript

2 голосов
/ 04 мая 2019

Я пытаюсь изменить содержимое страницы с помощью 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?

Есть ли способ отладки js-кода с помощью операторов print (например, python)?

Новичок в HTML и JS и благодарен за любую помощь.

Ответы [ 3 ]

1 голос
/ 04 мая 2019

Вы неправильно анализируете значения int. Используйте parseInt, чтобы получить фактические значения для переменных 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 прямо из консоли вашего браузера. Читать дальше Как мне отладить мой код JavaScript?

0 голосов
/ 04 мая 2019

Поскольку вы новичок в 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

0 голосов
/ 04 мая 2019

Ваша переменная "result" является строкой. Ваша функция не вычисляет ничего. Представляет только вашу строку, где: "=" + r [r.length - 2]

r [r.length - 2] - это то же самое, что и r [0].

r [0] - это то же самое, что var a = parseInt (document.getElementById ('a'). Value);

...