Форум

Lexx · #1 (**permalink**) 06.09.2021, 17:48

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

рони · #2 (**permalink**) 06.09.2021, 18:07

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 · #3 (**permalink**) 07.09.2021, 08:51

Правильно ли я понял
Мне не хватало объявленной переменной и в случае когда мне надо завершить цикл все сбрасывается в нее

Aetae · #4 (**permalink**) 07.09.2021, 09:11

Lexx, давайте разберём. Просто опишите свою логику, почему оно должно работать.

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

span = document.createElement('span').innerHTML = `<span>${getFullName()}</span>`

В реальности тут создаётся глобальная переменная span в которую кладётся строка `${getFullName()}`, также создаётся элемент span, внутрь которого кладётся другой span, внутрь которого кладётся возврат getFullName(). После чего это нигде и никак не используются, созданный элемент удаляется сборщиком мусора, а глобальная переменная со строкой остаётся бесполезно висеть.

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

return toString();

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

рони · #5 (**permalink**) 07.09.2021, 09:30

Aetae,

Lexx · #6 (**permalink**) 07.09.2021, 09:47

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

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

Lexx · #7 (**permalink**) 07.09.2021, 09:48

Цитата:

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

Она должны была быть замыкающей, как сделал её Рони, я не мог допетрить как замкнуть.
Прошу сильно не ругать, я только 2ю неделю разбираюсь с JS

Lexx · #8 (**permalink**) 07.09.2021, 11:14

Можно еще вопрос?
Поскольку у нас Span является строкой, как теперь в него засунуть ID и CLASS

Test().span('Text...', { id: "spanBlue", class: "blueSpan" }).toString()

Aetae · #9 (**permalink**) 07.09.2021, 13:41

Lexx, если тебе это надо чтоб научиться - ты должен разобраться с такими вещами сам, иначе толку не будет. Если тебе это надо для дела - используй хотя-бы тот же jquery или одну из 100500 других либ, умеющих примерно также.

span(tagSpan, attrs) {
  attrs = Object
    .entries(attrs || {})
    .map(([key, val]) => `${key}="${val}"`)
    .join(' ');
  str += `<span ${attrs}>${getFullName()}</span>`

Lexx · #10 (**permalink**) 07.09.2021, 14:13

Aetae, спасибо
Да, я учусь, разбираюсь во всем сам, но иногда утыкаюсь во что-то, на что даже не могу сформулировать запрос в поисковик

Но мне бы, наверное, даже хватило бы просто объяснения куда копать.

Форум

Справочник

Discord чат

Курсы javascript