Hilfe bei JavaScript Code?

ich habe was ausprobiert, aber da scheint was falsch zu sein, sieht man einen Fehler auf den ersten blick?

Also die Aufgabe ist: Es sollen die gefundene Position auf einer Karte darstellen mit Hilfe von Leaflet. Mit der Funktion updateMarkers werden die übergebenen GeoTags auf der Karte als Marker angezeigt. Beim Aufruf der Methode werden die zuvor vorhandenen Marker entfernt.

updateLocation-Funktion sollte wie folgt ergänzt werden:

  • Die Funktionen initMap und updateMarkers mit den aktuellen Koordinaten aufrufen. Daraufhin wird die Karte in Ihrer App angezeigt.
  • Suche im DOM das Image Element auf der Webseite.
  • Lösche sowohl das <img>-Element als auch das <p>-Element für die Beschriftung mithilfe des DOM (nicht in der HTML Datei). Dadurch wird der Platzhalter zur anfänglich Darstellung der Karte auf der Webseite wieder entfernt.

Kann jemand helfen? Mit Schritten auf die man unbedingt achten soll, oder so?

Der momentane Code sieht so aus…:

function updateLocation() {
    // Auslesen der Position mit findLocation
    LocationHelper.findLocation((locationHelper) => {
        // Koordinaten aus dem LocationHelper-Objekt abrufen
        const latitude = locationHelper.latitude;
        const longitude = locationHelper.longitude;
        
        // Koordinaten in die Formulare eintragen
        document.getElementById('taglatinput').value = latitude;
        document.getElementById('taglonginput').value = longitude;
        document.getElementById('disclatinput').value = latitude;
        document.getElementById('disclonginput').value = longitude;

        // Koordinaten auf Karte darstellen
        MapManager.initMap(latitude, longitude);
        MapManager.updateMarkers(latitude, longitude);
        
        // Image und p-Elemente im DOM entfernen
        const mapImage = document.getElementById('map');
        const mapDescription = document.getElementById('resultMap');
        // Konsolenausgabe zur Überprüfung der Koordinaten
        console.log("Latitude:", latitude);
        console.log("Longitude:",longitude);
        if (mapImage && mapDescription) {
            mapImage.remove();
            mapDescription.remove();
        }
    });
}

document.addEventListener("DOMContentLoaded", updateLocation);

HTML, Webseite, JavaScript, HTML5, Code, Informatik, Programmiersprache, Webentwicklung, Frontend
Action URL in einem PHP-Formular über einen Schalter in Echtzeit dynamisch ändern, wie?

Also Folgendes: ich hab hier ein PHP-Formular mit einem Eingabefeld und einem Submit Button, dass die eingegebenen Werte an eine bestimmte URL sendet. (Das ist erstmal simpel) Ich habe auch herausgefunden, wie man die URL z.b mit einer Zahlenfunktion variieren kann. Auch das geht relativ leicht. Was hingegen scheinbar weniger einfach ist: Ich würde das Action Attribut, also die URL, wo die Eingaben hingesendet werden nun gerne über einen HTML-Schalter z.b Checkbox dynamisch & in Echtzeit ändern. z.b Checkbox aktiv = Daten werden an URL2 gesendet, Checkbox nicht aktiv = Daten werden an URL1 gesendet. Oder es soll einfach ein URL-Zusatz hinzugefügt werden, je nachdem ob die Checkbox aktiv ist oder nicht. Meine jetzt ganz blöde Frage: Wie oder mit welchem Ansatz kann das funktionieren? Ich habe da jetzt bereits XX Stunden rumprobiert: Normale Variablen mit Conditions definieren, Sessions starten, der Versuch ein Cookie zu setzen, dass beim Ein und Ausschalten der Checkbox gesetzt bzw. gelöscht werden soll (klappt nicht). Mit JS Codeschnipseln herumprobiert. Nichts davon scheint zu funktionieren bzw. es wird einfach immer der Zustand "checkbox unchecked" an URL1 gesendet.

Hat irgendeiner mit Ahnung ne Idee wieso das nicht funktioniert und ob es einen lösbaren Ansatz für dieses Problem gibt?

HTML, Webseite, JavaScript, HTML5, Datenbank, PHP, Programmiersprache, Webdesign, Webentwicklung, Webserver, Frontend
TailwindCSS Höhe eines Containers in einem Container ignorieren lassen?

Heyy,
ich habe vor, das die Job Angebote unter dem Titel landen, der Titel an sich aber trotzdem noch von der höhe Zentriert ist. Kann mir wer dabei helfen?

<div class="flex 2xl:flex-row justify-start items-center w-full md:w-9/12 2xl:w-full 2xl:justify-center min-h-[38rem] h-[88vh] relative">
    <div class="space-y-8 xl:ml-4 2xl:min-w-[52rem] 2xl:w-[62rem]" id="left">
        <img class="w-6 xl:w-8 transition-all delay-100 ease-in-out" src="Vector.svg" alt="Fluxify Vector">
        <div class="space-y-3">
            <h2 class="font-syne font-medium text-[1.435rem] leading-[1.525rem] lg:text-[1.735rem] lg:leading-[1.825rem] 2xl:text-[1.835rem] 2xl:leading-[2.225rem] line-clamp-3 2xl:line-clamp-2 transition-all delay-100 ease-in-out">Deine Karriere bei uns - Bewerbe Dich noch heute!</h2>
            <p class="font-sura text-md leading-4 md:text-lg 2xl:text-lg text-[#8A8A8A] md:leading-5 2xl:leading-5 line-clamp-4">Bist du Softwareentwickler, Webseitenentwickler, Designer, Konzeptentwickler, Systemadministrator oder kannst du einen anderen Bereich der IT abdecken? Bewirb Dich bei uns - wir bieten Dir als Freelancer Kunden & Aufträge mit fairer Bezahlung.</p>
            <div class="">
                <x-jobs.offers/>
            </div>
        </div>
    </div>
    <div class="2xl:flex justify-end w-full hidden" id="right">
        <div class="select-none relative 2xl:left-44">
            <img class="rounded-[1.56rem] min-w-[28.5rem] 2xl:max-w-[38rem]" src="placeholder-01.jpg">
        </div>
    </div>
</div>

Hier ein Screenshot mit:

Und hier ohne + eine Einzeichnung, wo es hin sollte:

Ich bedanke mich herzlich über jede Hilfe!

Bild zum Beitrag
Homepage, HTML, Webseite, CSS, Programmiersprache, Webdesign, Webentwicklung, Frontend
HTML/CSS/JS: Warum funktioniert meine bindDelete-Funktion nicht und wie kann ich die Preisangaben untereinander formatieren?

Hi, ich habe an einen Spezialisten eine Frage:

import Order from './Order.js';
import ArticleModel from './ArticleModel.js';

export default function UserOrderViewHandler(articleModel) {
  this.articleModel = articleModel;
  this.order = new Order(-1, null, [], 0, 0, 0, 0, 0, false);
}

UserOrderViewHandler.prototype.renderPage = function() {
  let body = document.getElementsByTagName('body')[0];
  body.innerHTML = "";
  body.innerHTML = `<div class="container">
    <sidebar>
      <h1 class="mb-4">Unser Sortiment</h1>
      <div id="articleList">
        <div class="row space-between">
          <div class="col-md-4 mb-4">
            <div class="card" data-index="0">
              <div>
                <h2>Salamipizza</h2>
                <p>Halbe hausgemachte Pizza mit Käse und regionaler Salami</p>
                <p><strong>6.50 €</strong></p>
                <button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4">
            <div class="card" data-index="1">
              <div>
                <h2>Hamburger</h2>
                <p>Burger mit österreichischem Rindfleisch, Ketchup und Senf</p>
                <p><strong>6.00 €</strong></p>
                <button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4">
            <div class="card" data-index="2">
              <div>
                <h2>Wochenmenü</h2>
                <p>Frittatensuppe --- Spaghetti Bolognese --- Muffin</p>
                <p><strong>12.50 €</strong></p>
                <button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </sidebar>
    <sidebar>
      <h1 class="mb-4 extramargin">Bestellung</h1>
      <ul id="order"></ul>
      <div class="form-group">
        <label for="pickupTime">Gewünschte Abholzeit:</label>
        <input type="time" id="pickupTime" class="form-control">
      </div>
    </sidebar>
  </div>`;
}

UserOrderViewHandler.prototype.renderOrder = function() {
  let orderElement = document.getElementById('order');
  orderElement.innerHTML = "";
  orderElement.className = "list-group";

  let i = 0;

  for (let article of this.order.articleList) {
    let articleElement = document.createElement('li');
    articleElement.className = "list-group-item d-flex justify-content-between align-items-center";
    articleElement.innerHTML = `
      <div>1 x ${article.name} &emsp; &emsp; &emsp;${article.price.toFixed(2)} €</div>
      <button class="delBtn btn btn-danger btn-sm" data-index="${i}">Entfernen</button>
    `;
    orderElement.appendChild(articleElement);
    i++;
  }
}

UserOrderViewHandler.prototype.bindAddBtn = function() {
  let buttons = document.getElementsByClassName('addBtnClss');
  const that = this;

  for (let button of buttons) {
    button.addEventListener('click', function() {
      let index = this.closest('.card').getAttribute('data-index');
      let article = that.articleModel.getByIndex(index);

      if (article) {
        that.order.addArticle(article);
        that.renderOrder();
      }
    });
  }
}

UserOrderViewHandler.prototype.bindDeleteBtn = function() {
  let orderElement = document.getElementById('order');
  orderElement.addEventListener('click', function(event) {
    if (event.target.classList.contains('delBtn')) {
      let index = event.target.getAttribute('data-index');
      that.order.deleteArticle(index);
      that.renderOrder();
    }
  });
}
  1. Warum funktioniert meine bindDelete-Funktion nicht, um die li-Elemente wieder zu löschen?
  2. Wie kann ich es schaffen, dass der Preis von jedem li-Element genau so untereinander ist, sodass man ihn schön zusammenrechen könnte:

Danke für die Hilfe.

Bild zum Beitrag
Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend
footer ist nicht sticky?

Es ist irgendwie etwas ganz komisch...

Der Footer der vom code her eigentlich sticky am ende der Website seien sollte, ist es nicht.

Ich habe bei .footer auch mal provisorisch background: red; reingemacht, aber da passiert irgendwie auch nicht so viel..

kann mir da jemand helfen, ich und Chat GPT checken es nicht xD (bin noch anfänger)

hier der HTML code vom footer:

<section class="footer">

<div class="footer-row">

<div class="footer-col">

<h4>Info</h4>

<ul class="links">

<li><a href="#">About Us</a></li>

<li><a href="#">Compressions</a></li>

<li><a href="#">Customers</a></li>

<li><a href="#">Service</a></li>

<li><a href="#">Collection</a></li>

</ul>

</div>

<div class="footer-col">

<h4>Explore</h4>

<ul class="links">

<li><a href="#">Free Designs</a></li>

<li><a href="#">Latest Designs</a></li>

<li><a href="#">Themes</a></li>

<li><a href="#">Popular Designs</a></li>

<li><a href="#">Art Skills</a></li>

<li><a href="#">New Uploads</a></li>

</ul>

</div>

<div class="footer-col">

<h4>Legal</h4>

<ul class="links">

<li><a href="#">Customer Agreement</a></li>

<li><a href="#">Privacy Policy</a></li>

<li><a href="#">GDPR</a></li>

<li><a href="#">Security</a></li>

<li><a href="#">Testimonials</a></li>

<li><a href="#">Media Kit</a></li>

</ul>

</div>

<div class="footer-col">

<h4>Newsletter</h4>

<p>

Subscribe to our newsletter for a weekly dose

of news, updates, helpful tips, and

exclusive offers.

</p>

<form action="#">

<input type="text" placeholder="Your email" required>

<button type="submit">SUBSCRIBE</button>

</form>

<div class="icons">

<i class="fa-brands fa-facebook-f"></i>

<i class="fa-brands fa-twitter"></i>

<i class="fa-brands fa-linkedin"></i>

<i class="fa-brands fa-github"></i>

</div>

</div>

</div>

</section>

CSS Code vom footer:

.footer {

position: fixed;

bottom: 0;

left: 50%;

transform: translate(-50%, -50%);

max-width: 1280px;

width: 95%;

background: red;

border-radius: 6px;

}

.footer .footer-row {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

gap: 3.5rem;

padding: 60px;

background-color: darkslategrey;

}

.footer-row .footer-col h4 {

color: #fff;

font-size: 1.2rem;

font-weight: 400;

}

.footer-col .links {

margin-top: 20px;

}

.footer-col .links li {

list-style: none;

margin-bottom: 10px;

}

.footer-col .links li a {

text-decoration: none;

color: #bfbfbf;

}

.footer-col .links li a:hover {

color: #fff;

}

.footer-col p {

margin: 20px 0;

color: #bfbfbf;

max-width: 300px;

}

.footer-col form {

display: flex;

gap: 5px;

}

.footer-col input {

height: 40px;

border-radius: 6px;

background: none;

width: 100%;

outline: none;

border: 1px solid #7489C6 ;

caret-color: #fff;

color: #fff;

padding-left: 10px;

}

.footer-col input::placeholder {

color: #ccc;

}

.footer-col form button {

background: #fff;

outline: none;

border: none;

padding: 10px 15px;

border-radius: 6px;

cursor: pointer;

font-weight: 500;

transition: 0.2s ease;

}

.footer-col form button:hover {

background: #cecccc;

}

.footer-col .icons {

display: flex;

margin-top: 30px;

gap: 30px;

cursor: pointer;

}

.footer-col .icons i {

color: #afb6c7;

}

.footer-col .icons i:hover {

color: #fff;

}

@media (max-width: 768px) {

.footer {

position: relative;

bottom: 0;

left: 0;

transform: none;

width: 100%;

border-radius: 0;

}

.footer .footer-row {

padding: 20px;

gap: 1rem;

}

.footer-col form {

display: block;

}

.footer-col form :where(input, button) {

width: 100%;

}

.footer-col form button {

margin: 10px 0 0 0;

}

}

HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code

Meistgelesene Fragen zum Thema Frontend