Verwandte Themen

Frage
von FrozenArmy
19.03.2023, 13:26
Frage wurde 1 Mal erneut gestellt
JavaScript EventListener funktioniert nicht richtig?

Mein JS-Code:

'use strict'

let lines = document.getElementsByClassName("src-line");
let activeLine = -1;

for (let i1 = 0, i2 = lines.length; i1 < i2; i1++) {
  lines[i1].addEventListener("mouseover", function(){
    lines[i1].style.cursor = "text";
  });
  lines[i1].addEventListener("click", function(){
    activeLine = i1;
    console.log(activeLine);
  });
}
addEventListener("keydown", keypressed(e));

function keypressed(e) {
  if (activeLine != -1) {
    if (e.key == "Backspace") {
      console.log("Backspace");
      ediText[activeLine] = ediText[activeLine].substring(0, ediText[activeLine].length - 1);
    }
    else if (e.key == "Tab") {
      ediText[activeLine] += "&nbsp;&nbsp;&nbsp;&nbsp;";
    }
    else if (e.key == "Shift") {
      return;
    }
    else if (e.key == "Space") {
      ediText[activeLine] += "&nbsp;";
    }
    else {
      ediText[activeLine] += e.key;
    }

    console.log(e.key)
    charCompiler(ediText);
  }

  return 0;
};

Wenn ich nun auf ein Element mit der Klasse src-line klicke, wird in der Konsole immer der Listenindex angezeigt. Ich habe momentan zwei, also zeigt es immer 0 oder 1 an.

Wenn ich jetzt allerdings anfange, Buchstaben einzugeben, wird das zuletzt angeklickte Element verändert. Jedoch kann ich jetzt nicht mehr das Element wechseln, denn klicke ich jetzt auf das andere Element, wird das click-Event nicht mehr aufgerufen. D.h. activeLine wird nicht mehr geändert. Ich habe keinen Plan, warum.

Ist evtl. am Code was falsch, weil ich habe keine Ahnung warum das click-Event nach dem keydown einfach ignoriert wird, obwohl es davor ja noch ging. Btw wird auch in der Konsole beim Klicken danach nichts mehr angezeigt.

Computer, Technik, HTML, Webseite, programmieren, JavaScript, Click, HTML5, Entwicklung, Programmiersprache, Technologie, Webentwicklung, Entwicklungsumgebung
1 Antwort
Frage
von Lenny774
19.03.2023, 13:52
Werte aus Datenbank anzeigen mit JS?

Hallo,

ich habe folgenden Code für mein Formular:

<form action="/message1" method="post">
  <div class="input">
    <input type="text" placeholder="Chat" id="input" name="input1">
  </div>
  <div class="send">
    <button type="submit" onclick="message();">Send</button>
  </div>
</form>

Nun noch das JS onclick-Event:

function message() {
  input = document.getElementById("input").value;
  count++;

  if (input == "") {
    alert("please type your message!");
  }
  else {
    if (count % 2 == 0) {
      let newDiv = document.createElement("div");
      newDiv.id = "divMessage";
      newDiv.style.display = "flex";
      newDiv.style.justifyContent = "flex-start";
      newDiv.style.margin = "45px";
      newDiv.style.backgroundColor = "#303032";
      newDiv.style.borderRadius = "10px";
      newDiv.style.padding = "10px";
      newDiv.style.marginTop = "80px";
      newDiv.style.color = "white";
      newDiv.style.marginBottom = "80px";
      newDiv.style.width = "120px";
      newDiv.innerHTML = input;

      let chatMessages = document.querySelector(".chat-messages");
      chatMessages.appendChild(newDiv);
    }

Und nun noch das Reinschreiben mit node.js in die MariaDB-Datenbank:

app.post('/message1', async (req, res) => {
  const input = req.body.input1;
  console.log(input);
  const conn = await pool.getConnection();
  await conn.query(`INSERT INTO test.handy (id, name) VALUES (2, '${input}')`);
  conn.release();
});

Nun möchte ich aber, das, was in die Datenbank geschrieben wurde, beim Aktualisieren der Seite immer noch im "newDiv" anzeigen. Wie geht das?

LG

HTML, Webseite, Datenbank, Programmiersprache, Webentwicklung
2 Antworten
Frage
von Dultus, UserMod Light
16.03.2023, 08:16
CSS @media Maximum Width überschreiben?

Guten Morgen,

mein Vater hat eine Website auf MyWebsite von IONOS. Er hat dort einen Buchungskalender, der unter 1025 Pixel Weite nicht angezeigt wird aufgrund folgenden CSS Codes;

@media screen and (min-device-width: 1024px) {
            .mediumScreenDisabled { display:block }
            .smallScreenDisabled { display:block }
        }
        @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } }
        @media screen and (max-device-width: 568px) { .smallScreenDisabled { display:none } }
                @media screen and (min-width: 1024px) {
            .mobilepreview .mediumScreenDisabled { display:block }
            .mobilepreview .smallScreenDisabled { display:block }
        }
        @media screen and (max-width: 1024px) { .mobilepreview .mediumScreenDisabled { display:none } }
        @media screen and (max-width: 568px) { .mobilepreview .smallScreenDisabled { display:none } }

Der @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } } -Teil verhindert das Anzeigen des Kalenders und möchte deshalb die maximale width ändern.

Allerdings gibt es auf MyWebsite selbst wohl keine Option dazu und der IONOS Support meint, dass sie für Drittanbieter Snippets keinen Support anbieten (dabei bin ich mir ziemlich sicher, dass das von denen kommt, da der Kalender in einem iframe eingebunden ist).

Gibt es eine Möglichkeit über CSS die Eigenschaft separat nochmal zu überschreiben, wenn ich das Snippet von oben nicht manipulieren kann?

Danke und LG

Computer, HTML, Webseite, programmieren, CSS, HTML5, Programmiersprache, Webdesign, Webentwicklung
3 Antworten
Frage
von Computerneu1357
01.03.2023, 09:55
Mit Bildern
Mit Links
JavaScript: fetch API Fehler - Anfrage wegen CORS blockiert?

Hi,

ein Freund von mir ist großer Fan von dem Format "Barsch'sche Filosofie", das auf SWR3 läuft. Es ist aber etwas umständlich, sich auf deren Seite durch die ganzen Witze durchzuklicken, vor allem, weil man so nicht sieht, was alles drin ist.

Ich habe erst vor ein paar Wochen begonnen, JavaScript richtig zu lernen und dachte mir, zu Übungszwecken probiere ich mal, damit eine Auflistung mit allen Witzen zu ermöglichen.

Essentiell hierbei ist für mich, dass mit jedem Seitenaufruf meines HTML-Dokuments die Filosofie-Webseite "abgefragt" wird (simples GET-Request), damit auch neue Sachen beim abrufen mit dabei sind, wenn die SWR-Redaktion neue einstellt. Das mache ich mit fetch(). Es funktioniert auch alles soweit super, es gibt nur ein Problem:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://www.swr3.de/comedy/barschsche-filosofie-100.html. (Grund: CORS-Anfrage war nicht http).

Mit CORS habe ich mich bislang noch nicht wirklich auseinandergesetzt, aber laut mdn liegt es an einem fehlenden Header in der Server-Response? Auf die hab ich in diesem Fall wohl keinen großen Einfluss...

Wenn ich schreibe, dass alles soweit super funktioniert, dann meine ich damit, dass es manchmal geht, manchmal aber nicht. In letzterem Fall bekomme ich diese Fehlermeldung. Das versuche ich momentan zu beheben. Kann mir jemand weiterhelfen?

Bild zum Beitrag
Webseite, programmieren, JavaScript, Webentwicklung
1 Antwort
Frage
von schemil053
26.02.2023, 00:26
Mit Bildern
CSS: Wie kann ich Karten gleich groß anzeigen?

Guten Tag,

ich habe einen kleinen Design-Bug in meiner Webseite.

(s. Bild)

Wie kann ich dieses Problem lösen?

Mein CSS:

<style>
.item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 10%;
  border-radius: 5px;
  background: #191c29;
  color: rgb(88 199 250 / 100%);
}
.con {
  background: #adadad;
  overflow: auto;
  overflow-x: hidden;
  background: #212534;
}

.item:hover {
  box-shadow: 0 16px 32px 0 rgba(250,250,250,0.2);
}
img {
  border-radius: 5px 5px 0 0;
  height: 150px;
	width: 100%;
}
.container {
  padding: 2px 16px;
}
body {
  overflow: hidden; 
}


* {box-sizing: border-box;}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}




* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.item {
  float: left;
 /* width: 25%; */
  width: 15%; /* 10%*/
  height: 50%; /* 50% */
  padding: 20 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.row {
  margin: 0 -5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-sm {
  text-align: center;
}
/* @media screen and (max-width: 600px) { */
@media screen and (max-width: 800px) {
  .item {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.text-center {
  text-align: center;
}
</style>

Der Code von einer Karte:

<div class="row">
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
</div>

Danke für jede Hilfe. Ich weiß, dass der CSS-Code nicht der schönste ist, allerdings lerne ich die Sprache noch!

Bild zum Beitrag
HTML, Webseite, CSS, HTML5, Webdesign, Webentwicklung, Frontend
1 Antwort
Frage
von ArdaS716
25.02.2023, 13:46
Mit Bildern
Text unter Bild in HTML hinzufügen?

Ich habe ein Bild. Darunter habe ich ein Text platziert. Allerdings geht der Horizontal von links nach rechts, was es auch soll. Nur soll er da anfangen, wo auch das Bild beginnt und enden, wo das Bild endet. In den zwei Bildern könnt ihr erkennen, wie es es gerade habe und nicht will und wie ich es gerne haben würde. 

<!DOCTYPE html>
<html>
<head>
    <title>Film- und Serienbeschreibungen</title>
  


  <style>
    img {
        display: block;
        margin: 0 auto;
        width: 1000px;
        border-radius: 10px;
    }


    body {
        text-align: center;
    }


    p {
        
    }
  </style>
</head>
  <body>
    <img src="mrrobotscene.jpg">
    <h1>Mr. Robot - Beschreibung</h1>
    <p>Mr. Robot ist eine US-amerikanische Fernsehserie, die von Sam Esmail entwickelt wurde. Die Serie handelt von Elliot Alderson, einem jungen Programmierer, der für eine Cyber-Sicherheitsfirma arbeitet und in seiner Freizeit zum Hacker wird. Elliot leidet unter sozialen Ängsten und Depressionen und verfällt in eine Art Schizophrenie, die von seinem imaginären Freund, Mr. Robot, ausgelöst wird</p>
    
  </body>
</html>
Bild zum Beitrag
PC, Computer, Programm, HTML, Webseite, programmieren, CSS, Java, JavaScript, HTML5, Hacking, Informatik, JQuery, PHP, Programmiersprache, Python, Softwareentwicklung, Technologie, Webdesign, Webentwicklung, Visual Studio Code, Frontend-Entwicklung
3 Antworten
Frage
von KobalReis
21.02.2023, 04:06
Wordpress richtig installieren Webseite hosten Hilfe?

Hallo Liebe Community, ich bin zurzeit dabei eine eigene Webseite zu erstellen über das Programm Wordpress, leider kenne ich mich nicht wirklich viel mit dieser Materie aus habe mir viele Tutorials angesehen die aber leider mir nicht wirklich weiterhelfen konnten. Laut meinen Recherchen soll es zwei Versionen des WordPress geben einmal die Lite Version direkt über den Browser und eine die über das Wordpress.org gedownloadet werden müsste über diese ich mehr Möglichkeiten beim individualisieren meiner page haben soll.

ich habe da ich mich nicht wirklich gut auskannte das Jahres Business Paket über die WordPress Tarife gekauft worin eine Domain und ein fertiger Host enthalten sein sollte leider wird mir in den YouTube Tutorials nur die Anleitung gezeigt wie ich durch externe databases Hosts und Domains den Download abschliesse und an der Webseite arbeiten kann.

kann mir jemand erklären wie ich die WordPress.org richtig downloade und ob dies überhaupt nötig ist? Oder reicht der normale browser oder die WP App im Microsoft AppStore.?

ich bedanke mich für eure Mühen und antworten falls ihr Tipps habt welche Videos ich mir einschalen sollte oder wenn ihr Communitys habt die ihr empfehlen könnt wo ich mich mit Gleichgesinnten austauschen kann würde es mich sehr freuen.

LG KOBAL

Homepage, HTML, Webseite, programmieren, CSS, WordPress, PHP, Webdesign, Webentwicklung, wordpress.com, filezilla, Wordpress Plugin, Wordpress Theme, wordpress.org, Shopify
2 Antworten
Frage
von Lenny774
20.02.2023, 09:17
Mit Links
Panorama Bild wie bei Google Maps?

Hi,

Ich habe folgenden Code:

HTML:

<div id="panorama-container">
  <img src="https://media04.meinbezirk.at/article/2016/10/31/6/9445226_XXL.jpg" id="panorama-image" />


  <a href="#" id="fullscreen-button">Vollbildschirm</a>
</div>

CSS:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}


#panorama-container {
  width: 100%;
  height: 100%;
}


#panorama-image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-width: auto;
  overflow-y: hidden;
}


#fullscreen-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

JS:

var panoramaContainer = document.getElementById("panorama-container");
var panoramaImage = document.getElementById("panorama-image");
var fullscreenButton = document.getElementById("fullscreen-button");
var position = 0;
var initialX = null;


fullscreenButton.addEventListener("click", function() {
  if (panoramaContainer.requestFullscreen) {
    panoramaContainer.requestFullscreen();
  } else if (panoramaContainer.webkitRequestFullscreen) {
    panoramaContainer.webkitRequestFullscreen();
  } else if (panoramaContainer.mozRequestFullScreen) {
    panoramaContainer.mozRequestFullScreen();
  } else if (panoramaContainer.msRequestFullscreen) {
    panoramaContainer.msRequestFullscreen();
  }
});


document.addEventListener("touchstart", function(event) {
  initialX = event.touches[0].clientX;
});


document.addEventListener("touchmove", function(event) {
  if (initialX === null) {
    return;
  }


  var currentX = event.touches[0].clientX;
  var diffX = currentX - initialX;
  initialX = currentX;


  movePanorama(diffX); /* Change this value to adjust the speed of the movement */


  event.preventDefault();
});


document.addEventListener("touchend", function() {
  initialX = null;
});


function movePanorama(amount) {
  position += amount;
  panoramaImage.style.left =        position + "px";


 
  
}

Nun wird zwar das bild wie bei Google maps angezeigt, also genauer gesagt möchte ich das wenn ich auf meinem Bild nach links wische, dass es sich nach links dreht und rechts genau so. Das Problem ist nur wenn ich zu weit Wische, zeigt er mir ein weißen Screen, aber wie kann man das verhindern.

Vielleicht versteht ihr was ich meine

LG

HTML, Webseite, CSS, JavaScript, Webdesign, Webentwicklung
1 Antwort

Meistgelesene Fragen zum Thema Webentwicklung
Mehr meistgelesene Fragen zu Webentwicklung