JavaScript Auf datetime des Child-Elements zugreifen?

[yoyo2435x]

Hallo zusammen,

ich lerne gerade JS und habe dazu mal eine Frage.

Anbei mein Code:

<button type="button" class="relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10">
  <time datetime="2022-06-02" class="mx-auto flex h-7 w-7 items-center justify-center rounded-full">2</time>
</button>

<button type="button" class="relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10">
  <time datetime="2022-06-03" class="mx-auto flex h-7 w-7 items-center justify-center rounded-full">3</time>
</button>

<button type="button" class="relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10">
  <time datetime="2022-06-04" class="mx-auto flex h-7 w-7 items-center justify-center rounded-full">4</time>
</button>

Wenn ich jetzt einen der Button anklicke, möchte ich, dass der datetime-Wert als GET-Parameter
an eine weitere URL weitergeleitet wird. Bspw. /xyz.php?datetime=2022-06-02 - wie kann ich da
am besten vorgehen? Leider habe ich aktuell noch rein gar keinen Ansatz, wie ich da vorgehen
könnte.

Freue mich auf eure Unterstützung. LG

 

[tollertyp]

Und JS-Code, der auf den Button grundsätzlich reagiert, hast du schon (Event-Listener)?

 

[netzgestaltung]

Ist schon etwas aufwand, vor allem wenn erstmal noch garnichts da ist. Sieht ein wenig nach Hausübung aus?

ansonsten hier was du brauchst:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
https://developer.mozilla.org/en-US/docs/Web/API/Element
https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

 

[Domski]

Vllt. so:
https://codepen.io/schlomm/pen/vYdOxJv

Der Zugriff auf das time-Element via nextSilbing ist etwas krude, aber via childNodes auf das Element zuzugreifen, wollte partout nicht funzen

 

[RalphS]

Das kann durchaus interessant werden.
1- Sicherstellen, daß der Klick vom Button angenommen wird und nicht vom Time Element.
2- Per Eventhandler (click) eine Referenz auf den Sender bekommen. Das "sollte" der Button sein, aber wie angedeutet, wenn man nicht aufpaßt ist es ggfs was anderes.
3- Der Button hat jetzt genau einen Childnode, jedenfalls dann, wenn der Code oben Indikativ ist.
Also entweder den ersten Childnode des Senders nehmen oder halt per eindeutiger Eigenschaft rausfischen.
4- Und dann einfach das DateTime Attribut des TIME Knoten nehmen.

Wenn HTML ordentlich konform wäre(normalerweise ist es das nicht) könnte man auch mit XPath ran.
Aber dann muß man sich an Standards halten, sonst fliegt einem das um die Ohren.

jQuery ist meistens ausreichend einfach und zuverlässig, aber ist natürlich nicht die einzige Option.

 

[playerthreeone]

Wieso überhaupt ein time-Element in den Button verschachteln? Einfach dem Button ein data-Attribut "time" (o.ä.) geben.

Wenn HTML ordentlich konform wäre

Soweit ich das verstehe, kommt das html vom TE selbst. Er hätte also die Kontrolle drüber. Und ich glaub nicht, dass ein datetime in button konform ist.