JavaScript仅使用thymeleaf更改第一次迭代的文本

我希望你们都好

我有一个学校作业，我希望能够动态地更改“项目”的名称。这个作业是关于项目的。我现在这样做的方式适用于使用thymeleaf迭代的“项目”列表中的第一个“项目”。我知道我现在所做的是绝对糟糕的代码行为，但我们还没有教过JS。但我真的很想要这个功能。 我不知道如何使每个项目预览都能使用它，现在第一个预览可以使用它，但其余的只是从数据库中删除项目名称。（见图）

函数更改_text（）{
var-changedText；
var projectName=prompt（“请输入项目名称：”）；
var oldName=document.getElementById（“oldName”）.value；
如果（projectName==null | | projectName===“”）{
changedText=oldName；
}否则{
changedText=项目名称；
}
document.getElementById（“newName”）.value=changedText；
}

HTML中的第一个表单是红十字会删除整个“项目”。第二个表单用于更改“项目预览”中显示的名称，但仅适用于第一个预览，并从其余表单中删除项目名称。最后一个表单是实际预览。在使用JavaSpring和Thymeleaf时，我找不到另一种方法来创建多个表单并发布不同的帖子。
我的愿望是使change_text（）函数对每个“项目预览”都有效

致以最良好的祝愿

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;
}

好的，我做了一些改变。首先，注意带有

oldName

和

newName

的输入现在有了类。这些可以重复。如果您没有将ID用于脚本以外的任何内容，则应将其删除。否则，如果您为它们设置了样式规则，则应考虑更改这些CSS规则以使用该类，这样您就可以删除无效的重复ID。 其次，图像的onlick现在传入

this

。它所做的是传递用户单击的实际输入，这样您就有了用户正在与之交互的表单元素的上下文

然后查看逻辑，该方法现在接受onclick中的

imageInput

，这是

this

---

使用

imageInput.parentNode

我们沿着DOM树到达输入的父元素，这就是本例中的表单。然后，我们可以转过身，使用

querySelector

查找表单中要操作的其他元素。它只会在我们特定的表单中找到元素，因为这就是我们要从中选择的内容。

根本问题是您正在重复ID。ID在单个页面中应该是唯一的

document.getElementById（…）

总是只返回上下文中的第一个匹配项，这就是整个

文档。这绝对有道理。有没有可能通过名字或类似的方式获得？如果您知道，当然，如果您切换到
querySelector（）
或
queryselectoral（）
，您可以使用选择器字符串。在这种情况下，您可以通过
'.class'
或
'#id'
或
'[attribute=“value”]'
（例如
'[name=“whatever”]'
）来查找一些基本内容。噢，感谢您的输入。我相信我没有学到的JS知识在这里帮不了我。是否可以将我现在拥有的更改为您上面提到的名称？您是否有时间和意愿提交答案？还是像我做的那样或多或少是无法挽回的？太多了，塔普拉！你太棒了。祝你有美好的一天！
<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>

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>