Не работает консоль
Добры вечер,может кто подсказать почему не работает данная задача со скриптом? Условие функцию, которая возвращает первую цифру заданного целого числа
в виде английского слова. Примеры: 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;
|
Странно вы методы класса задаете.
А что такое #numInput в const num = jsConsole.readInteger('#numInput'); ? |
Цитата:
|
Цитата:
Цитата:
и в целом читать и переделывать https://learn.javascript.ru/class |
Помочь то можно. Но как?
Просто написать Вам программу? Вы должны понять свои ошибки. Изучить как задаются классы. Изучить понятие области видимости переменной ( в стр 18 textArea.appendChild(textLine); вы к какой переменной textArea обращаетесь? Уж не к той ле которая определена в функции constructor 11 const textArea = document.createElement('p'); ? А где можно обращаться к переменной, определенной внутри функции? ) Изучите стрелочные функции. Что такое this в стрелочной функции? (И их уж совсем нельзя делать методами класса) |
:write: дело было вечером...
<!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>
|
Если уж совсем учить, то класс можно начать так
(по модному) 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);
}
|
Цитата:
|
Цитата:
Цитата:
Во-первых поля класса (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:} |
voraa,
Спасибо!!! |
| Часовой пояс GMT +3, время: 14:11. |