Почему выдаёт ошибку textarea.focus is not a function?

Question

[Anvario0]

Задача: написать div, который при клике превращается в textarea, а при blur обратно в div.

код:

let div = document.createElement("div");
document.body.append(div);
div.style.backgroundColor = "red";
div.innerHTML = "fhwekfhwehwkvw";

div.addEventListener("click", function(event) {
    let divClone = div;
    let textarea = div.outerHTML = "<input type='textarea'>";
    textarea.focus();
    
    textarea.addEventListener("blur", function(event) {
        textarea.remove();
        div = divClone;
        document.body.append(divClone);
    })
})

ошибка: textarea.focus is not a function.
С чем она связана?

Comments

[Lynn «Кофеман»]

С тем что у вас в переменной textarea лежит строка, а не элемент DOM.

И, кстати, правильно <textarea></textarea>, потому что никакого <input type='textarea'> в HTML не существует.

Answer 1

[Алексей Ярков]

С чем она связана?

С попыткой копипастить код без понимания что там написано. Вы у строки пытаетесь метод вызвать. Если переменная называется textarea, то это не значит, что у неё есть метод focus.

Задача: написать div, который при клике превращается в textarea, а при blur обратно в div.

А точно ли задача звучит именно так? Может вам нужна возможность редактировать текст в теге div, а не превращать его в текстовое поле? Тогда вам просто <div contenteditable="true">Какой-то текст</div> подойдёт.

<input type='textarea'>

А это вообще шедевр ))