Jump to content

fluffy82

New Members
  • Posts

    2
  • Joined

  • Last visited

Everything posted by fluffy82

  1. Yes. The code syntax is correct. I think the problem is which code I'm using.
  2. Hi all, I'm trying to write a page for my genealogy website, which eventually will show a French Republican calendar, a Gregorian calendar, and highlight corresponding dates between them when selected. My PHP knowledge is limited, but I'm trying to learn as I go. Some things really don't seem clear to me. Which is why I'm asking you for any hints or tips. First step is trying to get the calendar to show as I want it to. I've included three months with 5 days each for testnig purposes. The months show up correctly, the days are "calculated" correctly, but the display won't toggle when clicking on a month. The .days div is standard "display: none", and when I select a month, the corresponding .days div should be changed into "display: block". But it doesn't. Clicking a month has no result. Any ideas why? I'm quite sure there's something wrong with the <script> but I can't figure out what... <!DOCTYPE html> <html> <head> <title>French Republican Calendar</title> <meta charset="UTF-8"> <style> .month-container { margin: 10px; } .month { display: inline-block; margin: 10px; padding: 10px; background-color: #EEE; cursor: pointer; } .days { display: none; margin-top: 10px; padding: 10px; background-color: #DDD; } .day { margin: 5px 0; font-weight: bold; } .name { margin-left: 10px; font-style: italic; } </style> </head> <body> <h1>French Republican Calendar</h1> <?php $months = array( "Vendémiaire" => array( array("1", "Raisin"), array("2", "Safran"), array("3", "Châtaigne"), array("4", "Colchique"), array("5", "Cheval") ), "Brumaire" => array( array("1", "Pomme"), array("2", "Céleri"), array("3", "Poire"), array("4", "Betterave"), array("5", "Oie") ), "Frimaire" => array( array("1", "Raiponce"), array("2", "Turneps"), array("3", "Chicorée"), array("4", "Nèfle"), array("5", "Cochon") ), ); foreach ($months as $month => $days) { echo "<div class='month-container'>"; echo "<div class='days' id='" . htmlentities($month, ENT_QUOTES, "UTF-8") . "'>"; foreach ($days as $day) { echo "<div class='day'>" . $day[0] . "<span class='name'>" . $day[1] . "</span></div>"; } echo "</div>"; echo "<div class='month' onclick='toggleDays(this)'>$month</div>"; echo "</div>"; } ?> <script> function toggleDays(el) { var days = null; var sibling = el.nextElementSibling; while (sibling) { if (sibling.classList.contains("days")) { days = sibling; break; } sibling = sibling.nextElementSibling; } if (days.style.display === "none") { days.style.display = "block"; } else { days.style.display = "none"; } } var months = document.querySelectorAll(".month"); months.forEach(function(month) { month.addEventListener("click", function() { toggleDays(this); }); }); </script> </body> </html>
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.