Как правильно/корректно повесить событие на кнопку BUTTON, чтобы выводило результат из задачи JS на правильность скобок?

Question

Добрый день! Получилось сделать задачу на правильность скобок вот так, но не получается сделать вывод через событие addEventListener. Чтобы при нажатии на BUTTON или с помощью INPUT выводило результат.

Я еще новичок. Подскажите пожалуйста! За ранее спасибо!)

document.querySelector('.btn').addEventListener('click', isValid);

function isValid(a) {

  const brackets = {
    ')': '('
  };

  const stack = [];

  for (let i = 0; i < a.length; i++) {
    if (a[i] === "(") {
      stack.push(a[i]);
    } else if (stack[stack.length - 1] === brackets[a[i]]) {
      stack.pop();
    } else {
      return false;
    }
  }

  let inp = document.querySelector('.inp').value;
  document.querySelector('.out').innerHTML = inp;

  return stack.length ? false : true;


}

console.log(isValid('()'));
console.log(isValid('(()'));
console.log(isValid('()()'));

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" class="inp">
  <button class="btn">Push</button>
  <div class="out">Result: </div>

  <script src="/index.js"></script>
</body>

</html>

Answer 1

Напсиал как надо было обрабатывать ввод по нажатию. Ещё ваш алгоритм, елси честно немного сложный был, потому написал более простой вариант в своей функции, может будет полезно:

document.querySelector('.btn').addEventListener('click', () => {
  const inp = document.querySelector('.inp').value;
  document.querySelector('.result').innerHTML = isValid(inp);
});

document.querySelector('.check').addEventListener('click', () => {
  const inp = document.querySelector('.inp').value;
  document.querySelector('.result').innerHTML = checkBrackets(inp);
});

function isValid(a) {

  const brackets = {
    ')': '('
  };

  const stack = [];

  for (let i = 0; i < a.length; i++) {
    if (a[i] === "(") {
      stack.push(a[i]);
    } else if (stack[stack.length - 1] === brackets[a[i]]) {
      stack.pop();
    } else {
      return false;
    }
  }

  return stack.length ? false : true;
};

function checkBrackets(str) {
  let count = 0;

  for (const letter of str) {
    if (letter === '(') ++count;
    else if (letter === ')') {
      --count;
      if (count < 0) return false;
    }

  }

  return count === 0;
};

<input type="text" class="inp">
<button class="btn">Push</button>
<button class="check">Check</button>
<div class="out">Result: <span class="result"><span></div>

БЛОГ НА HUSL

Как правильно/корректно повесить событие на кнопку BUTTON, чтобы выводило результат из задачи JS на правильность скобок?

Ответы (1 шт):