Problem at replacing Node elements (input to text)
Hello i want to crate w function that allow user to rename a board, but when i want to replaceChild i get thos error:
HTML code and function will be in next message
Uncaught DOMException: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.
at renameBoard (http://127.0.0.1:5000/:412:19)
at HTMLButtonElement.onclick (http://127.0.0.1:5000/:41:139)
Uncaught DOMException: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.
at renameBoard (http://127.0.0.1:5000/:412:19)
at HTMLButtonElement.onclick (http://127.0.0.1:5000/:41:139)
1 Reply
HTML:
Javascript:
<div class="board" id="board-{{ board.id }}">
<div class="top">
<h2 class="board-title">{{ board.title }}</h2>
<div class="buttons">
<button class="board-managment-button border-edit size-board margin-r-10", onclick="renameBoard('board-{{ board.id }}')">
<img class="fill-edit" src="{{ url_for('static', filename='images/edit.svg') }}" alt="Remove Button">
<span class="tooltip background-edit"> RENAME </span>
</button>
<button class="board-managment-button border-delete size-board margin-r-15", onclick="removeBoard('{{ board.title }}')">
<img src="{{ url_for('static', filename='images/delete.svg') }}" alt="Remove Button">
<span class="tooltip background-delete"> DELETE </span>
</button>
</div>
</div>
<div class="board" id="board-{{ board.id }}">
<div class="top">
<h2 class="board-title">{{ board.title }}</h2>
<div class="buttons">
<button class="board-managment-button border-edit size-board margin-r-10", onclick="renameBoard('board-{{ board.id }}')">
<img class="fill-edit" src="{{ url_for('static', filename='images/edit.svg') }}" alt="Remove Button">
<span class="tooltip background-edit"> RENAME </span>
</button>
<button class="board-managment-button border-delete size-board margin-r-15", onclick="removeBoard('{{ board.title }}')">
<img src="{{ url_for('static', filename='images/delete.svg') }}" alt="Remove Button">
<span class="tooltip background-delete"> DELETE </span>
</button>
</div>
</div>
function renameBoard(boardID) {
let board = document.getElementById(boardID);
console.log(board)
let boardTitle = board.querySelector(".board-title");
console.log(boardTitle)
let buttonsSection = board.querySelector(".buttons");
toggleButtons(buttonsSection, false);
let input = document.createElement("input");
input.classList.add("edit-title-input");
input.setAttribute("placeholder", "Enter board name...");
input.type = "text";
input.value = boardTitle;
let saveChanges = function() {
if (input.value.trim() !== "") {
boardTitle.textContent = input.value;
};
board.replaceChild(boardTitle.textContent, input);
toggleButtons(buttonsSection, true);
};
input.addEventListener("blur", saveChanges);
input.addEventListener("keydown", function(event) {
if (event.key == "Enter") {
saveChanges();
};
});
board.replaceChild(input, boardTitle);
input.focus();
};
function renameBoard(boardID) {
let board = document.getElementById(boardID);
console.log(board)
let boardTitle = board.querySelector(".board-title");
console.log(boardTitle)
let buttonsSection = board.querySelector(".buttons");
toggleButtons(buttonsSection, false);
let input = document.createElement("input");
input.classList.add("edit-title-input");
input.setAttribute("placeholder", "Enter board name...");
input.type = "text";
input.value = boardTitle;
let saveChanges = function() {
if (input.value.trim() !== "") {
boardTitle.textContent = input.value;
};
board.replaceChild(boardTitle.textContent, input);
toggleButtons(buttonsSection, true);
};
input.addEventListener("blur", saveChanges);
input.addEventListener("keydown", function(event) {
if (event.key == "Enter") {
saveChanges();
};
});
board.replaceChild(input, boardTitle);
input.focus();
};