Javascript 无法在我的表单中正常工作

Question

所以我目前正在为我们的班级做一个项目，其中我必须在单独的页面上显示我以前存储在数据库中的东西。我选择显示每个数据集，因为它是最容易做到的。使用 PHP，我实现了一个 foreach 循环，它应该在每个数据集下方显示一个“编辑”按钮。当我不使用 javascript 并且只是将编辑表单的类设置为显示时，它可以工作，并且我可以编辑所有条目，但表单始终可见。如果我尝试使用 javascript 隐藏表单，所有条目仍会显示，但如果我按下具有单独功能的按钮“编辑”将类设置为“显示”，它只会让我选择编辑第一个条目在数据库中。

这是我的 php/html 代码：

foreach ($resultArray as $row) {
      echo '<h1 class="title">' . $row['title'] . '</h1>';
      echo '<img classe="headerImage" src="images/' . $row['picture'] . '" alt="' . $row['alternativetext'] . '" width="500px">';
      echo '<p class="countryDisplay"> We were in ' . $row['countryName'] . '</p>';
      echo '<p class="startDateDisplay">Started on: ' . $row['startDate'] . '</p>';
      echo '<p class="endDateDisplay">Ended on: ' . $row['endDate'] . '</p>';
      echo '<p class="storyContent">' . $row['blogContent'] . '</p>';

      echo '<button class="edit-button" onclick="showContent()">EDIT</button>';

      echo '<section class="hide" id="edit-form">
                <form action="' . $_SERVER['PHP_SELF'] . '" method="POST" accept-charset="utf-8" enctype="multipart/form-data">
                <p class="hide">
                    <input type="hidden" name="id" id="id" value="' . $row['blogID'] . '">
                </p>
                <p class="title-par">
                  <label for="title" class="title">Title:</label><p class="required">*</p><br>
                  <input type="text" name="title" id="title" value="' . $row['title'] . '"><br>
                </p>
                <div class="picture-div">
                  <label for="picture" class="picture">Upload a picture:</label><br>
                  <input type="file" name="picture" id="picture" value="' . $row['picture'] . '"><br>
                </div>
                <p class="alttext-par">
                  <label for="alttext">Give your Picture a fitting Name:</label><br>
                  <input type="text" name="alternativetext" id="alternativetext" value="' . $row['alternativetext'] . '"><br>
                </p>
                <div class="country-div">
                  <label for="country" class="country" require>Select Country:</label><p class="required">*</p><br>
                  <select name="country" id="country">';
                // Connect to Database:
                // Database Query
                $queryCountries = 'SELECT countryID, countryName FROM countries ORDER BY countryName ASC';

                //Usee $queryCountries
                $resultArrayCountries = $db->query($queryCountries);
                // Jede Zeile ist ein eigenes Land
                foreach ($resultArrayCountries as $rowCountries) {
                  echo "<option value=\"$rowCountries[countryID]\">$rowCountries[countryName]</option>";
                }
                echo '</select><br>
                </div>
                <p id="date-par">
                  <label for="startDate" class="startDate">Start Date:</label><p class="required">*</p>
                  <input type="date" name="startDate" id="startDate" value="' . $row['startDate'] . '">
                  <label for="endDate" class="endDate">End Date:</label><p class="required">*</p>
                  <input type="date" name="endDate" id="endDate" value="' . $row['endDate'] . '"><br>
                </p>
                <p class="story-par">
                  <label for="story" class="story">Say Something:</label><p class="required">*</p><br>
                  <textarea name="story" id="story" cols="60" rows="30">'.$row['blogContent'].'</textarea><br>
                </p>
                <p id="action-buttons">
                  <input class="save-button" type="submit" name="save" id="save" value="SAVE">
                  <input class="cancel-button" type="submit" name="cancel" id="cancel" value="CANCEL" onclick="hideContent()">
                </p>
                </form>
                </section>
                </section>';
    };

这是javascript（它保持非常简单，因为我们还没有javascript指令）

function resetForm(){
    document.getElementById("newForm").resetForm();
}
function showContent(){
    document.getElementById("edit-form").classList.add("show");
    document.getElementById("edit-form").classList.remove("hide");
}
function hideContent(){
    document.getElementById('edit-form').classList.remove("show");
    document.getElementById('edit-form').classList.add("hide");
}

（对不起所有语法错误，我不是本地人）

我找到了一个适合我的解决方案...我不知道为什么它以前不起作用，但我不得不使用变量。

function showContent(x){
    const editFormElement = document.getElementById('edit-form'+x);
    const editFormElementClassList = editFormElement.classList;
    editFormElementClassList.add('show');
    editFormElementClassList.remove('hide');
}
function hideContent(x){
    const editFormElement = document.getElementById('edit-form'+x);
    const editFormElementClassList = editFormElement.classList;
    editFormElementClassList.add('hide');
    editFormElementClassList.remove('show');
}

Answer 1

ID 在您的 HTML 文档中必须是唯一的。 document.getElementById('edit-form') 将返回页面上 ID 为 edit-form 的第一个元素。例如，您可以将行号附加到您的 id，然后将其作为参数传递给您的 javascript 函数。