Javascript 无法与我的表单一起正常工作

Question

So I am currently doing a project for our class, in which I have to display something that I previously stored in a database on a separate page. I chose to display every dataset, as it is the easiest to do. With PHP I implemented a foreach loop which is supposed to show each dataset with a button "EDIT" underneath it. When I don't use javascript and just have the class of the edit form set to show, it works, and I can edit all my entries but the form is always visible. If I try to hide the form with javascript, all the entries are still shown, but if I press the button "EDIT" which has a seprete function to set the class to "show" it only gives me the option to edit the first entry in the database.

Here is my code for the 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>';
    };

and here is the javascript (it is kept very simple, as we haven't had a javascript instruction yet)

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

(I am sorry for all grammatical mistakes, I am not native)

I found a solution that worked for me... I don't know why it didn't work before but I had to work with variables.

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

IDs need to be unique on your HTML document. document.getElementById('edit-form') will return the first element on the page with the id edit-form . You could for an example append the row number to your id, and then pass it as a parameter to your javascript functions.