Форум

dakus · #1 (**permalink**) 06.06.2022, 20:39

Добры вечер,может кто подсказать почему не работает данная задача со скриптом? Условие функцию, которая возвращает первую цифру заданного целого числа
в виде английского слова.
Примеры: 215 > "two", 4021 >"four"

<!DOCTYPE html>
<html>
<head>
<input id="input" />
<button id="btn">Answer</button>
<div id="console"></div>
<script src="/z3script.js"></script>

</head>
<body>

class JsConsole {
  constructor(selector) {
    const consoleElement = document.querySelector(selector);
 
    if (consoleElement.className) {
      consoleElement.className = consoleElement.className + ' js-console';
    } else {
      consoleElement.className = 'js-console';
    }
 
    const textArea = document.createElement('p');
    consoleElement.appendChild(textArea);
  }
 
  write = (text) => {
    const textLine = document.createElement('span');
    textLine.innerHTML = text;
    textArea.appendChild(textLine);
    consoleElement.scrollTop = consoleElement.scrollHeight;
  };
 
  writeLine = (text) => {
    this.write(text);
    textArea.appendChild(document.createElement('br'));
  };
 
  read = (inputSelector) => {
    const element = document.querySelector(inputSelector);
    if (element.innerHTML) {
      return element.innerHTML;
    } else {
      return element.value;
    }
  };
 
  readInteger = (inputSelector) => {
    const text = this.read(inputSelector);
    return parseInt(text);
  };
 
  readFloat = (inputSelector) => {
    const text = this.read(inputSelector);
    return parseFloat(text);
  };
}
 
jsConsole = new JsConsole('#console');
 
var word = [
  'ноль',
  'один',
  'два',
  'три',
  'четыре',
  'пять',
  'шесть',
  'семь',
  'восемь',
  'девять',
];
 
function lastdigit() {
  const num = jsConsole.readInteger('#numInput');
  if (isNaN(num)) {
    jsConsole.writeLine('not number');
    return;
  }
  const n = num.toString().split('').pop();
  jsConsole.writeLine(word[n ?? 0]);
}
 
document.querySelector('#btn').onclick = lastdigit;

voraa · #2 (**permalink**) 06.06.2022, 21:07

Странно вы методы класса задаете.

А что такое #numInput в
const num = jsConsole.readInteger('#numInput');
?

dakus · #3 (**permalink**) 06.06.2022, 21:11

Сообщение от voraa

Странно вы методы класса задаете.

А что такое #numInput в
const num = jsConsole.readInteger('#numInput');
?

Это мои попытки сделать ввод через консоль,можете помочь пожалуйста?

рони · #4 (**permalink**) 06.06.2022, 21:23

Сообщение от dakus

первую цифру заданного целого числа

pop() так не работает

Сообщение от dakus

('#numInput');

что это?
и в целом читать и переделывать https://learn.javascript.ru/class

voraa · #5 (**permalink**) 06.06.2022, 21:27

Помочь то можно. Но как?
Просто написать Вам программу?
Вы должны понять свои ошибки.
Изучить как задаются классы.
Изучить понятие области видимости переменной
( в стр 18
textArea.appendChild(textLine);
вы к какой переменной textArea обращаетесь?
Уж не к той ле которая определена в функции constructor
11 const textArea = document.createElement('p');
?
А где можно обращаться к переменной, определенной внутри функции?
)

Изучите стрелочные функции. Что такое this в стрелочной функции?
(И их уж совсем нельзя делать методами класса)

рони · #6 (**permalink**) 06.06.2022, 21:31

дело было вечером...

<!DOCTYPE html>
<html>

<head> </head>

<body>
    <input id="input" />
    <button id="btn">Answer</button>
    <div id="console"></div>
    <script>
        class JsConsole {
            constructor(selector) {
                this.consoleElement = document.querySelector(selector);
                this.consoleElement.classList.add('js-console');
                this.textArea = document.createElement('p');
                this.consoleElement.appendChild(this.textArea);
            }

            write(text) {
                const textLine = document.createElement('span');
                textLine.innerHTML = text;
                this.textArea.appendChild(textLine);
                this.consoleElement.scrollTop = this.consoleElement.scrollHeight;
            }

            writeLine(text) {
                this.write(text);
                this.textArea.appendChild(document.createElement('br'));
            }

            read(inputSelector) {
                const element = document.querySelector(inputSelector);
                if (element.innerHTML) {
                    return element.innerHTML;
                } else {
                    return element.value;
                }
            }

            readInteger(inputSelector) {
                const text = this.read(inputSelector);
                return parseInt(text);
            }

            readFloat(inputSelector) {
                const text = this.read(inputSelector);
                return parseFloat(text);
            }
        }

        jsConsole = new JsConsole('#console');

        var word = [
            'ноль',
            'один',
            'два',
            'три',
            'четыре',
            'пять',
            'шесть',
            'семь',
            'восемь',
            'девять',
        ];

        function lastdigit() {
            const num = jsConsole.readInteger('#input');
            if (isNaN(num)) {
                jsConsole.writeLine('not number');
                return;
            }
            const n = num.toString().split('')[0];
            jsConsole.writeLine(word[n ?? 0]);
        }

        document.querySelector('#btn').onclick = lastdigit;
    </script>
</body>

</html>

voraa · #7 (**permalink**) 06.06.2022, 21:43

Если уж совсем учить, то класс можно начать так
(по модному)

class JsConsole {

    consoleElement;
    textArea;

    constructor(selector) {
         this.consoleElement = document.querySelector(selector);
         this.consoleElement.classList.add('js-console');
         this.textArea = document.createElement('p');
         this.consoleElement.appendChild(this.textArea);
   }

рони · #8 (**permalink**) 06.06.2022, 21:56

Сообщение от voraa

Если уж совсем учить, то класс можно начать так
(по модному)

а что это даёт? как использовать? можно пример?

voraa · #9 (**permalink**) 06.06.2022, 22:19

Сообщение от рони

а что это даёт? как использовать? можно пример?

Сообщение от рони

а что это даёт? как использовать? можно пример?

Можно целый трактат на эту тему написать
Во-первых поля класса (class fields - https://developer.mozilla.org/en-US/...nstance_fields) помогают читаемости кода. Ведь не обязательно все поля используются, инициализируются в конструкторе. Некоторые поля могут использоваться только в отдельных методах. А задание полей класса сразу показывает какие поля есть в классе. Какие в экземплярах класса, какие статические, какие приватные.
Во-вторых это гарантирует, что при создании экземпляра класса все поля будут создаваться в определенном порядке - том, который указан при задании полей.
Например

class C {
    constructor () {
       this.a = 0;
    }

    set X (v) {this.x = v}
    set Y (v) {this.y = v}
}

const o1 = new C();
o1.X = 2;
o1.Y = 3;

const o2 = new C();
o1.Y = 3;
o1.X = 2;

Мы получили
o1 = {a: 0, x:2, y:3}
o2 = {a:0, y:3, x:2}

С точки зрения самого js разницы особой нет.
Но с точки зрения всех js машин (и v8 хрома, и в файрфоксе, и в сафари) разница большая. Эти объекты имеют разную внутреннюю структуру и оптимизация работы с такими объектами невозможна.
А задание

class C {
    a;
    x;
    y;
    constructor () {
       this.a = 0;
    }

гарантирует, что все экземпляры класса будут иметь одинаковую структуру {a: x: y:}

рони · #10 (**permalink**) 06.06.2022, 22:23

voraa,
Спасибо!!!

Форум

Справочник

Discord чат

Курсы javascript