JavaScript изменяет текст только первой итерации с помощью тимелеафа
Надеюсь, у вас все хорошо.
У меня есть школьное задание, и я хочу иметь возможность динамически менять название «проекта». Это задание относится к проектам. То, как я сделал это прямо сейчас, работает с первым «проектом» из списка «проектов», повторяемых с помощью тимелеафа. Я осознаю, что то, что я сделал прямо сейчас, является абсолютно плохим поведением кода, но у нас еще не было обучения JS. Но я очень хотел эту функцию. Я не знаю, как заставить это работать для каждого предварительного просмотра проекта, сейчас это работает для первого предварительного просмотра, но в остальном он просто стирает имя проекта из базы данных. (см. рисунок)
<div class = "projects" th:each = "projectNames : ${listOfProjects}">
<form action = "deleteProjectPost" method = "post">
<input type = "hidden" th:value = "${projectNames.projectID}" name = "deleteID">
<input type = "image" src = "delete.png" alt = "Submit" align = "right" class = "deleteProject" onclick = "return confirm('Are you sure that you want to delete this project?')">
</form>
<form action = "/editProjName" method = "post">
<input type = "hidden" name = "projectID" th:value = "${projectNames.projectID}">
<input type = "hidden" id = "oldName" th:value = "${projectNames.projectName}">
<input type = "hidden" id = "newName" name = "projectName">
<input type = "image" src = "edit.png" alt = "Submit" onclick = "change_text()" align = "right" class = "editProject">
</form>
<form action = "/projectPost" method = "post">
<input class = "projectInfo" name = "projectID" type = "text" th:value = "'Project No.: ' + ${projectNames.projectID}" readonly = "readonly">
<input class = "projectInfo" type = "text" th:value = "'Project name: ' + ${projectNames.projectName}" readonly = "readonly">
<input class = "projectInfo" type = "text" th:value = "${projectNames.projectStartDate} + ' - ' + ${projectNames.projectEndDate}" readonly = "readonly">
<input type = "submit" value = "OPEN" class = "openProject">
</form>
</div>
<script>
function change_text() {
var changedText;
var projectName = prompt("Please enter name of project:");
var oldName = document.getElementById("oldName").value;
if (projectName === null || projectName === "") {
changedText = oldName;
} else {
changedText = projectName;
}
document.getElementById("newName").value = changedText;
}
</script>
Первая форма в HTML — это красный крест для удаления всего «проекта». Вторая форма предназначена для изменения имени, отображаемого в «предварительном просмотре проекта», но работает только при первом предварительном просмотре и удаляет имя проекта из остальных. Последняя форма является фактическим предварительным просмотром. Я не мог найти другого способа иметь несколько форм и делать разные POSTS при работе с Java Spring и Thymeleaf.
Я хочу, чтобы функция change_text() работала для каждого «предварительного просмотра проекта».
С наилучшими пожеланиями!
Ах я вижу. Это имеет большой смысл. Можно ли получить по имени или как-то так? Если ты знаешь, конечно
Если вы переключитесь на querySelector(<selector>) или querySelectorAll(<selector>), вы можете использовать строки выбора. по этой причине вы можете искать вещи по '.class' или '#id' или '[attribute = "value"]' (например, '[name = "whatever"]'), чтобы назвать некоторые из основ
О, спасибо за ваш вклад. Я считаю, что мои необученные знания JS мне здесь не помогут. Можно ли изменить <script>, который у меня есть прямо сейчас, на то, что вы упомянули выше, чтобы получить по имени? Как бы у вас было время и желание, возможно, представить ответ? или это более или менее невыполнимо, как я это сделал?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
function change_text(imageInput) {
var changedText;
var projectName = prompt("Please enter name of project:");
var oldName = imageInput.parentNode.querySelector('.old-name').value;
if (projectName === null || projectName === "") {
changedText = oldName;
} else {
changedText = projectName;
}
imageInput.parentNode.querySelector('.new-name').value = changedText;
}
<form action = "/editProjName" method = "post">
<input type = "hidden" name = "projectID" th:value = "${projectNames.projectID}">
<input type = "hidden" class = "old-name" id = "oldName" th:value = "${projectNames.projectName}">
<input type = "hidden" class = "new-name" id = "newName" name = "projectName">
<input type = "image" src = "edit.png" alt = "Submit" onclick = "change_text(this)" align = "right" class = "editProject">
</form>
Итак, я сделал несколько изменений. Во-первых, обратите внимание, что входные данные с oldName и newName теперь имеют классы. Их можно повторить. Если вы не используете идентификаторы ни для чего другого, кроме скрипта, вы должны удалить их. В противном случае, если у вас есть правила стиля для них, вам следует подумать об изменении этих правил CSS, чтобы вместо этого использовать класс, чтобы вы могли удалить недопустимые повторяющиеся идентификаторы.
Во-вторых, онлик изображения теперь проходит в this. Что это делает, так это то, что он передает фактический ввод, который щелкнул пользователь, поэтому у вас есть некоторый контекст, в котором элемент формы взаимодействует с пользователем.
Затем, глядя на логику, метод теперь принимает imageInput, который является this из onclick.
Используя imageInput.parentNode, мы поднимаемся по дереву DOM к родительскому элементу ввода, который в данном случае является формой. Затем мы можем развернуться и использовать querySelector, чтобы найти другой элемент в форме, которой мы хотим манипулировать. И он найдет элемент только в нашей конкретной форме, потому что это то, что мы выбираем.
Большое спасибо, Таплар! Ты великолепен. Хорошего дня!
Основная проблема заключается в том, что вы повторяете идентификаторы. Ожидается, что идентификаторы будут уникальными в пределах одной страницы.
document.getElementById(...)всегда будет возвращать только первое совпадение в контексте, то есть всеdocument