Javascript-форум - Нужна помощь новичку, помогите плз

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Нужна помощь новичку, помогите плз (https://javascript.ru/forum/events/83070-nuzhna-pomoshh-novichku-pomogite-plz.html)

Нужна помощь новичку, помогите плз

Добрый день!
Нужна ваша помощь, бьюсь который день и не могу разобраться...
При вводе в консоль : Test().span('Hello').span('World').toString() должно выводиться HelloWorld

я ловлю "[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 в которую кладётся строка `${getFullName()}`, также создаётся элемент span, внутрь которого кладётся другой span, внутрь которого кладётся возврат getFullName(). После чего это нигде и никак не используются, созданный элемент удаляется сборщиком мусора, а глобальная переменная со строкой остаётся бесполезно висеть.

Что, по вашему мнению, должна делать вот эта строчка?:

return toString();

В реальности тут вызывается toString() глобального объекта(window) без контекста(в контексте undefined). Никакого отношения к твоему объекту этот вызов не имеет.

Aetae, рони
Большое спасибо, document.createElement('span').innerHTML в span был мусором от эксперементов

Еще раз большое спасибо за помощь и низкий поклон :thanks:

Цитата:

Что, по вашему мнению, должна делать вот эта строчка?:
return toString();

Она должны была быть замыкающей, как сделал её Рони, я не мог допетрить как замкнуть.
Прошу сильно не ругать, я только 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, спасибо
Да, я учусь, разбираюсь во всем сам, но иногда утыкаюсь во что-то, на что даже не могу сформулировать запрос в поисковик :) Но мне бы, наверное, даже хватило бы просто объяснения куда копать.