1

eval считает все верно, в консоль результат выводится. Но в input поместить результат вычисления не выходит.

Подскажите что делаю не так?

const input = document.querySelector('#input');
    const sumbutton = document.querySelector('#sumbutton');
    const result = document.querySelector('#result');
    const list = document.querySelector('#list');

    input.addEventListener('keydown', (event) => {
        let number = false;

        if (event.key >= 0 || event.key <= 9 || event.key === "*" || event.key === "+" || event.key === "-" || event.key === "Backspace") {
            number = true;
        }

        if (!number) {
            event.preventDefault();
        }
        if (event.key === "*" || event.key === "+" || event.key === "-") {
            const item = document.createElement('li');
            item.textContent = input.value;
            list.append(item);
            input.value = "";
        }
    });

    input.addEventListener('keyup', (event) => {
        if (event.key === "*" || event.key === "+" || event.key === "-") {
            const item = document.createElement('li');
            item.textContent = input.value;
            list.append(item);
            input.value = "";
        }
    });

    sumbutton.addEventListener('click', () => {

        const item = document.createElement('li');
        item.textContent = input.value;
        list.append(item);
        input.value = "";
        let sum = "";
        document.querySelectorAll('#list li').forEach(function (val) {
            sum += val.textContent.trim();
        });
        let res = eval(sum);
        console.log(res);
        result.textContent = res;  // не присваивает результат в инпут result
    });
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id = "input">
<button id = "sumbutton">COUNT</button>
<input  id = "result">
<ul id = "list"></ul>

4
  • а зачем вы используете eval? 4 дек 2020 в 9:00
  • я недавно начал изучать и увидел пример с eval, решил в нем разобраться т.к. пока не знаю других способов решения моего примера. Если есть другой способ буду признателен за ответ :)
    – Max M
    4 дек 2020 в 9:02
  • А какую задачу вы пытаетесь решить? Что за вычисление, что нужно выводить? 4 дек 2020 в 9:03
  • Калькулятор, где пользователь вводит в инпут числа, знаки + - * и по нажатию кнопки он мог получить результат
    – Max M
    4 дек 2020 в 9:04

1 ответ 1

3

у инпута нет свойства textContent, поэтому при его установке значение не меняется.

Для установки значения input необходимо менять поле value

const input = document.querySelector('#input');
const sumbutton = document.querySelector('#sumbutton');
const result = document.querySelector('#result');
const list = document.querySelector('#list');

input.addEventListener('keydown', (event) => {
  let number = false;

  if (event.key >= 0 || event.key <= 9 || event.key === "*" || event.key === "+" || event.key === "-" || event.key === "Backspace") {
    number = true;
  }

  if (!number) {
    event.preventDefault();
  }
  if (event.key === "*" || event.key === "+" || event.key === "-") {
    const item = document.createElement('li');
    item.textContent = input.value;
    list.append(item);
    input.value = "";
  }
});

input.addEventListener('keyup', (event) => {
  if (event.key === "*" || event.key === "+" || event.key === "-") {
    const item = document.createElement('li');
    item.textContent = input.value;
    list.append(item);
    input.value = "";
  }
});

sumbutton.addEventListener('click', () => {

  const item = document.createElement('li');
  item.textContent = input.value;
  list.append(item);
  input.value = "";
  let sum = "";
  document.querySelectorAll('#list li').forEach(function(val) {
    sum += val.textContent.trim();
  });
  let res = eval(sum);
  console.log(res);
  result.value = res; // не присваивает результат в инпут result
});
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <input id="input">
  <button id="sumbutton">COUNT</button>
  <input id="result">
  <ul id="list"></ul>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.