javascript - rallies.php：113未捕获的TypeError：无法设置未定义的属性“显示”-读取正文(rallies.php:113 Uncaught TypeError: Cannot set property 'display' of undefined - Read Body)

Question

I have looked at many questions that have been answered and none have worked.

(我查看了许多已回答的问题，但均未解决。)

Therefore that is why I am now putting this on.

(因此，这就是为什么我现在要讲这个。)

I am trying to print data when a month is clicked by the user.

(我试图在用户单击一个月时打印数据。)

I have previously had it working but it would only print one piece of data from that specific month.

(我以前可以使用它，但是它只能打印该特定月份的一个数据。)

However, there is multiple pieces of data for each month, therefore I want it all to be displayed.

(但是，每个月有多个数据，因此我希望全部显示。)

The error that keeps showing up is

(不断出现的错误是)

rallies.php:113 Uncaught TypeError: Cannot set property 'display' of undefined

My HTML:

(我的HTML：)

    <div class="calander-container">
        <div class="months">
            <p class="months-text">January</p>
        </div>
        <div class="months">
            <p class="months-text">February</p>
        </div>
        <div class="months">
            <p class="months-text">March</p>
        </div>
        <div class="months">
            <p class="months-text">April</p>
        </div>
        <div class="months">
            <p class="months-text">May</p>
        </div>
        <div class="months">
            <p class="months-text">June</p>
        </div>
        <div class="months">
            <p class="months-text">July</p>
        </div>
        <div class="months">
            <p class="months-text">August</p>
        </div>
        <div class="months">
            <p class="months-text">September</p>
        </div>
        <div class="months">
            <p class="months-text">October</p>
        </div>
        <div class="months">
            <p class="months-text">November</p>
        </div>
        <div class="months">
            <p class="months-text">December</p>
        </div>
    </div>

My PHP:

(我的PHP：)

if($row['month'] === 'January'){

                echo "<div class='rallyPrintJan'>";
                echo "<h2>" . $row['rallyVenue'] . " in " . $row['month'] . " " . $row['year'] . "</h2>";
                echo "<h4>Event: ". $row['rallyEvent'] . " </h4>";
                echo "<h3>Your Marshall(s): " . $row['rallyMarsh'] . "</h3>";
                echo "<h4>When? ". $row['rallyDate'] . " </h4>";
                echo "<p>" . $row['rallyDesc'] . "</p>";
                echo "<p>How much? ". $row['rallyCost'] . " </p>";
                echo "<p>How long? ". $row['rallyNights'] . " Nights</p>";
                echo "<p>Pitch Limit? ". $row['pitchLimit'] . "</p>";
                echo "<p>Phone Number: 0". $row['phoneNo'] . " </p>";
                echo "<p>Email: <a href='mailto:". $row['email'] . "'> ". $row['email'] ."</a></p>";
                echo "<p>Please make sure you to contact ". $row['rallyMarsh'] . " for more information.</p>";
                if(isset($_SESSION['loggedin'])){
                    echo "<a href='' id='". $row['rallyId'] . "' class='trash'>Delete</a>";
                }
                echo "</div><br>";
                 }

My javascript:

(我的JavaScript：)

document.querySelector('.months').addEventListener('click', (e) => {

    const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var monthName;

    months.forEach(month => {
    const el = document.getElementsByClassName("rallyPrint" + month);

    if (monthName === month) {
            el.style.display = "block"; // Show current month
    } else {
            el.style.display = "none"; // Not the current month, hide
    }

  });

});

  ask by Jack Partington translate from so

Answer 1

el.style is undefined because document.getElementsByClassName returns an HTMLCollection (array).

(el.style未定义，因为document.getElementsByClassName返回HTMLCollection（数组）。)

You will have more luck accessing eg el[0];

(您将有更多运气，例如el[0];)

on the condition that the class actually exists in the DOM.

(该类实际上在DOM中存在。)