Нужна помощь новичку, помогите плз
Добрый день!
Нужна ваша помощь, бьюсь который день и не могу разобраться... При вводе в консоль : Test().span('Hello').span('World').toString() должно выводиться <span>Hello</span><span>World</span> я ловлю "[object Undefined]" если вытягивать один span, то стоит заменить this на span и один выводится, а 2 не хотят. Хочу разобраться с этим что бы и 1 выводился и 2 спан. Если получится то хочу так и другие теги подтягивать
function Test() {
let tags = {
span(tagSpan) {
span = document.createElement('span').innerHTML = `<span>${getFullName()}</span>`
function getFullName() {
return tagSpan + "";
}
return this;
},
toString(){
return toString();
}
};
return tags
}
// Test().span('Hello').span('World').toString()
const Test1 = Test()
|
Lexx,
<body>
<script>
function Test() {
let str = '';
let tags = {
span(tagSpan) {
str += `<span>${getFullName()}</span>`
function getFullName() {
return tagSpan + "!!!";
}
return this;
},
toString() {
return str;
}
};
return tags
};
document.body.append(Test().span('Hello').span('World').toString());
</script> </body>
|
Правильно ли я понял
Мне не хватало объявленной переменной и в случае когда мне надо завершить цикл все сбрасывается в нее |
Lexx, давайте разберём. Просто опишите свою логику, почему оно должно работать.
Что, по вашему мнению, должна делать вот эта строчка?:
span = document.createElement('span').innerHTML = `<span>${getFullName()}</span>`
В реальности тут создаётся глобальная переменная span в которую кладётся строка `<span>${getFullName()}</span>`, также создаётся элемент span, внутрь которого кладётся другой span, внутрь которого кладётся возврат getFullName(). После чего это нигде и никак не используются, созданный элемент удаляется сборщиком мусора, а глобальная переменная со строкой остаётся бесполезно висеть.Что, по вашему мнению, должна делать вот эта строчка?: return toString();В реальности тут вызывается toString() глобального объекта(window) без контекста(в контексте undefined). Никакого отношения к твоему объекту этот вызов не имеет. |
Aetae,
:thanks: |
Aetae, рони
Большое спасибо, document.createElement('span').innerHTML в span был мусором от эксперементов Еще раз большое спасибо за помощь и низкий поклон :thanks: |
Цитата:
Прошу сильно не ругать, я только 2ю неделю разбираюсь с JS |
Можно еще вопрос?
Поскольку у нас Span является строкой, как теперь в него засунуть ID и CLASS
Test().span('Text...', { id: "spanBlue", class: "blueSpan" }).toString()
|
Lexx, если тебе это надо чтоб научиться - ты должен разобраться с такими вещами сам, иначе толку не будет. Если тебе это надо для дела - используй хотя-бы тот же jquery или одну из 100500 других либ, умеющих примерно также.
span(tagSpan, attrs) {
attrs = Object
.entries(attrs || {})
.map(([key, val]) => `${key}="${val}"`)
.join(' ');
str += `<span ${attrs}>${getFullName()}</span>`
|
Aetae, спасибо
Да, я учусь, разбираюсь во всем сам, но иногда утыкаюсь во что-то, на что даже не могу сформулировать запрос в поисковик :) Но мне бы, наверное, даже хватило бы просто объяснения куда копать. |
Можно еще вопрос? :)
Когда делаю вложенность все работает
Test().p(
Test().span('test').span('span')
).toString()
Но как сделать защиту или замену запятой на + при вводе
Test().p(
Test().span('test'),
Test().span('span')
).toString()
при таком варианте выводит только первый span и корректно заrрывает </p> была бы переменная, я сделал бы через .replace, а тут хз как быть Можно просто подсказать куда копать :) Большое спасибо |
Lexx,
Test().p что это? |
Цитата:
Test().p(Test().span('test'),Test().span('span')).toString()
По сути на выходе должно быть так "<p><span>test</span><span>span</span></p>" Но так получается или с + вместо запятой или если убрать это объявление Test().p(Test().span('test'),Test().span('span')).toString() |
Вот не могу понять как убрать лишний ,Test() или как-то заменить запятую на +
|
Lexx,
<body>
<script>
function Templater() {
let str = '';
let tags = {
getFullName(tagSpan, up = '') {
return tagSpan.length ? tagSpan.map(a => `${a}${up}`).join(' ') : '';
},
span(...tagSpan) {
str += `<span>${this.getFullName(tagSpan, '!!!')}</span>`
return this;
},
p(...tagSpan) {
str += `<p>${this.getFullName(tagSpan)}</p>`
return this;
},
toString() {
return str
}
};
return tags;
}
const template = Templater().p(
Templater().span('Hello'),
Templater().span('World')
)
document.body.append(template);
const temp = Templater().p(
Templater().span('test').span('span')
).toString();
document.write('<br>')
document.body.append(temp);
</script>
</body>
|
спасибо, буду разбирать что да как
|
| Часовой пояс GMT +3, время: 02:43. |