Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.06.2022, 20:39
Новичок на форуме
Отправить личное сообщение для dakus Посмотреть профиль Найти все сообщения от dakus
 
Регистрация: 04.06.2022
Сообщений: 7

Не работает консоль
Добры вечер,может кто подсказать почему не работает данная задача со скриптом? Условие функцию, которая возвращает первую цифру заданного целого числа
в виде английского слова.
Примеры: 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;
Ответить с цитированием
  #2 (permalink)  
Старый 06.06.2022, 21:07
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

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

А что такое #numInput в
const num = jsConsole.readInteger('#numInput');
?
Ответить с цитированием
  #3 (permalink)  
Старый 06.06.2022, 21:11
Новичок на форуме
Отправить личное сообщение для dakus Посмотреть профиль Найти все сообщения от dakus
 
Регистрация: 04.06.2022
Сообщений: 7

Сообщение от voraa Посмотреть сообщение
Странно вы методы класса задаете.

А что такое #numInput в
const num = jsConsole.readInteger('#numInput');
?
Это мои попытки сделать ввод через консоль,можете помочь пожалуйста?
Ответить с цитированием
  #4 (permalink)  
Старый 06.06.2022, 21:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от dakus
первую цифру заданного целого числа
pop() так не работает
Сообщение от dakus
('#numInput');
что это?
и в целом читать и переделывать https://learn.javascript.ru/class
Ответить с цитированием
  #5 (permalink)  
Старый 06.06.2022, 21:27
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

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

Изучите стрелочные функции. Что такое this в стрелочной функции?
(И их уж совсем нельзя делать методами класса)
Ответить с цитированием
  #6 (permalink)  
Старый 06.06.2022, 21:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

дело было вечером...
<!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>
Ответить с цитированием
  #7 (permalink)  
Старый 06.06.2022, 21:43
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

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

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от voraa
Если уж совсем учить, то класс можно начать так
(по модному)
а что это даёт? как использовать? можно пример?
Ответить с цитированием
  #9 (permalink)  
Старый 06.06.2022, 22:19
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Сообщение от рони Посмотреть сообщение
а что это даёт? как использовать? можно пример?
Сообщение от рони Посмотреть сообщение
а что это даёт? как использовать? можно пример?
Можно целый трактат на эту тему написать
Во-первых поля класса (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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

voraa,
Спасибо!!!
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Код полностью работает в консоли браузера,без нее только часть скрипта срабатывает Garrus Events/DOM/Window 2 02.12.2020 07:43
контент из XMLHttpRequest response с помощью innerHTML не работает m4ybe Events/DOM/Window 9 24.01.2018 14:35
Не работает push! Динамическая вставка TSEH25 ExtJS 5 03.07.2012 13:00
jQyery функция странно работает! Midel Общие вопросы Javascript 4 08.04.2012 13:40
Safari + ajax некорректно работает, а в других работает demi AJAX и COMET 35 15.07.2009 14:11