Пытался решить задачу по js, где надо написать код, который при клике на div превращался бы в textarea, где можно редактировать html код, а при расфокусировке отображал бы уже отредактированный вариант. Но столкнулся с со следующей проблемой, которую никак не могу понять.
Я хотел сделать через атрибут hidden, следующим образом:
let div = document.getElementById(`container`);
let textarea = document.createElement(`textarea`);
let divOuter = div.querySelector(`#userText`);
div.addEventListener(`click`, showTextarea);
function showTextarea() {
divOuter.hidden = true;
textarea.value = divOuter.outerHTML;
div.append(textarea);
textarea.focus();
};
div.addEventListener(`focusout`, closeTextarea);
function closeTextarea() {
divOuter.outerHTML = textarea.value;
console.log(divOuter.hidden)
divOuter.hidden = false;
console.log(divOuter.hidden)
textarea.hidden = true;
}
Почему-то при расфокусировке divOuter.hidden = false
не срабатывает, div не появляется, хотя вторая консоль выводит false.
Почему divOuter.hidden = false
не срабатывает по факту?
Но если добавить новую переменную с ссылкой на тот же div элемент вот так:
function closeTextarea() {
divOuter.outerHTML = textarea.value;
console.log(divOuter.hidden)
divOuter.hidden = false;
console.log(divOuter.hidden)
textarea.hidden = true;
let _divOuter = div.querySelector(`#userText`);
console.log(_divOuter.hidden)
_divOuter.hidden = false;
console.log(_divOuter.hidden)
};
То hidden в этом случае всё же сменяется в DOM и отображает div. Если честно, даже придумать не могу что-нибудь, почему это так работает.
HTML был следующим:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="userText">
<h1>Write here</h1>
<p>ok</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Заранее благодарю за помощь.
textarea
?