JavaScript – die neusten Beiträge

JavaScript: Preise aus mehreren Dropdown-Listen addieren?

Liebe*r Leser*in,

ich würde gerne in vier (4) Dropdown-Listen verschiedene Produkte mit teils verschiedenen Preisen auflisten. Je nach Auswahl soll dann eine Summe aus einem vorher festgelegtem Wert und zusätzlich die Summe aus jeweils einem Wert von jedem der vier Dropdown-Listen ausgegeben werden.

Also: Wert+Drop1+Drop2+Drop3+Drop4=Summe

Insgesamt habe ich 16 Produkte, die auf die Dropdown-Listen aufgeteilt sind, und einen Festwert, der als Startpunkt dient.

Mein Niveau ist als "totaler Anfänger" zu beschreiben. Daher bitte ich darum, nicht allzu viel vorauszusetzen. :)

Hier mal meine Zeilen:

        <div class="auswahlliste">
  			<select id="produktliste1">
  				<option value="0.60">Produkt1 (0,60 €)</option>
  				<option value="0.60">Produkt2 (0,60 €)</option>
  				<option value="0.60">Produkt3 (0,60 €)</option>
  				<option value="0.50">Produkt4 (0,50 €)</option>
  			</select>
  		</div>
  	
  		<div class="auswahlliste">
  			<select id="produktliste2">
  				<option value="1.10">Produkt1 (1,10 €)</option>
  				<option value="0.70">Produkt2 (0,70 €)</option>
  				<option value="0.65">Produkt3 (0,65 €)</option>
  				<option value="0.65">Produkt4 (0,65 €)</option>
  				<option value="0.60">Produkt5 (0,60 €)</option>
			</select>
		</div>
		
		<div class="auswahlliste">
			<select id="produktliste3">
				<option value="0.95">Produkt1 (0,95 €)</option>
				<option value="0.55">Produkt2 (0,55 €)</option>
				<option value="0.25">Produkt3 (0,25 €)</option>
			</select>
		</div>
		
		<div class="auswahlliste">
			<select id="produktliste4">
				<option value="0.60">Produkt1 (0,60 €)</option>
				<option value="0.60">Produkt2 (0,60 €)</option>
				<option value="0.60">Produkt3 (0,60 €)</option>
				<option value="0.50">Produkt4 (0,50 €)</option>
			</select>
		</div>

Die Summe soll dabei immer automatisch als Text ausgegeben und bei veränderter Auswahl auch neu berechnet und angezeigt werden.

Ich würde mich sehr freuen, wenn mir jemand helfen möchte!

Beste Grüße
4n0nym3r

Computer, Technik, HTML, programmieren, JavaScript, Technologie, Spiele und Gaming

Js loop?

 <script>
       let alarm = new Audio('alarm.mp3');
       let timerStarted = false;
       function startTimer() {
           if (!timerStarted) {
               let startTime = new Date().getTime();
               let fiveMinutes = 1000 * 60 * 5;
               let endTime = startTime + fiveMinutes;
               setInterval(function() {
                   let timeLeft = endTime - new Date().getTime();
                   if (timeLeft > 0) {
                       let minutes = timeLeft / (1000 * 60);
                       minutes = Math.floor(minutes);
                       let seconds = (timeLeft / 1000) % 60;
                       seconds = Math.round(seconds);
                       seconds = ('0' + seconds).slice(-2);
                       let text = '0' + minutes + ' : ' + seconds;
                       timer.innerHTML = text;
                   } else {
                       alarm.play();
                       timer.innerHTML = '00 : 00';
                   }
               }, 1000);
               timerStarted = true;
           }
       }
   </script>

Ich möchte diese Aktion gerne loopen (dass der timer immer neu startet nach dem Alarm) wie geht das?

Computer, HTML, programmieren, JavaScript

Javascript Cookie beim neu laden verhindern?

Hallo,

Wie kann ich verhindern, dass der Cookie beim neu Laden der Seite verhindert wird? Denn immer, wenn ich am Anfang den Namen des Besuchers abfrage, wird dieser nicht nur immer beim neuen betreten der Website gezeigt, sondern auch, wenn man die Seite neu lädt. Wie kann ich das verhindern?

Vielen Dank!

Hier mein Code:

<!DOCTYPE html>


<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body onload="checkCookie()">
        <input type = "button" onclick = "setCookie('anwender','',-1)" value = "Cookie
        l&ouml;schen">
        <h1>Website Test-Cookie</h1>
        <script>
        function setCookie(cookieName,inhalt,dauer) {
            let datum = new Date();
            datum.setTime(datum.getTime() + (dauer*24*60*60*1000));
            let ablaufdatum = "expires=" + datum.toGMTString();
            document.cookie = cookieName + "=" + inhalt + ";" + ablaufdatum;
        }


        function getCookie(cookieName) {
            cookieName += "=";   
            let decCookie = decodeURIComponent(document.cookie);          
            let arr = decCookie.split(';');
            for(let i = 0; i < arr.length; i++) {
                let inhalt = arr[i];
                while (inhalt.charAt(0) == ' ') {
                    inhalt = inhalt.substring(1);
                }
                if (inhalt.indexOf(cookieName) == 0) {
                    return inhalt.substring(cookieName.length);
                }
            }
            return "";
        }


        function checkCookie() {
            let anwender = getCookie("anwender");
            if (anwender != "") {
                alert("Hallo " + anwender + "!");
                $("h1").hide();
            }
            else {
                anwender = prompt("Geben Sie bitte Ihren Namen ein:");
                $("h1").show();
                if (anwender != "" && anwender != null) {
                    setCookie("anwender", anwender, 180);
                }
            }
        }
        </script>
    </body>
</html>


HTML, programmieren, JavaScript, Cookies

Wie sende ich Variablen von JavaScript nach Flask via jQuery?

Hallo,

ich bin in JavaScript/jQuery und auch Python/Flask noch ein ziemlicher Anfänger. Ich versuche gerade, einfach nur ein JSON-Objekt aus JavaScript in einem HTML-Template mit Flask anzuzeigen.

Hier mein Code:

Flask:

from flask import Flask,request, render_template

app = Flask(__name__)

@app.route("/")
def rofl():
  return render_template("test.html")

@app.route("/test", methods=['POST'])
def test():
  Namensliste = request.get_json(True)
  print(Namensliste)
  return render_template("rofl.html", Namensliste=Namensliste)

if __name__ == '__main__':
  app.run(port=5200)

test.html:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form action="#" method="post">
    <button type="button" onclick="JSONTest()"> Send UserInfo</button>
  </form>
</body>

rofl.html:

<head>
  <meta charset="UTF-8">
  <title>Titel</title>
</head>
<body>
  NamensListe: {{Namensliste}}
</body>

JavaScript-Datei:

var myJason = {
  "name1" : "Jens",
  "name2" : "Josef",
  "name3" : "Johannes"
}

function JSONTest() {
  var MyJason= JSON.stringify(myJason);
  console.log(MyJason)
  $.ajax({
    type: 'POST',
    url: '/test',
    data: MyJason,
    success: function(data) {
      console.log(data, "Rückmeldung1");
  }});
}

Wie mein Code eigentlich funktionieren soll ist: Ich rufe die Route "/" auf, drücke auf den Button: "JSONTest()" und meine Funktion sendet via jQuery mein JSON-Objekt an "/test". Dort wird das Objekt in Namensliste gespeichert und rofl.html mit der Namensliste darin aufgerufen.

Ich weiß, dass hier wahrscheinlich viele Grundlagenfehler drin sind, aber ich habe wirklich ewig lang gegooglet und finde einfach nicht, wie man es richtig macht.

Danke schon einmal für jede Idee.

Computer, Technik, HTML, programmieren, JavaScript, Informatik, JQuery, Python, Flask

HTML / JS: Wie kann ich mehrere Sachen aus dem localStorage ausgeben?

Hallo,

ich habe vor, eine Benutzerverwaltungssoftware zu programmieren. Jedoch bin ich auf ein Problem gestoßen.

Bei der unteren Artikelnummer kann man eine Art Schlüssel eingeben, welcher aber nicht gleich wie die Artikelnummer sein muss.

z.b. so..

Wenn man dann auf Suchen klickt und die Artikelnummer 01 eingibt, sollte es mir alles ausgeben. Das heißt, die Artikelnummer, Beschreibung, den Lagerplatz, usw..

Das habe ich bis jetzt alles:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title>Alle Artikel</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <td>Artikel Nr.</td>
        <td>Beschreibung</td>
        <td>Lagerplatz</td>
        <td>Bestand</td>
        <td>Preis</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          <input id="Artikel" value="" type="text" />
        </th>
        <th>
          <input id="Beschreibung" value="" type="text" />
        </th>
        <th>
          <input id="Lagerplatz" value="" type="text" />
        </th>
        <th>
          <input id="Bestand" value="" type="text" />
        </th>
        <th>
          <input id="Preis" value="" type="text" />
        </th>
      </tr>
    </tbody>
  </table>
  Artikel Nr.: <input id="Schlüssel" value="" type="text" />
  <input type="button" value="speichern" onclick="speichern()" />
  <input type="button" value="Artikel suchen" onclick="suche()" />
</body>
</html>
<script>
  function speichern() {
    var Schlüssel = document.getElementById('Schlüssel').value;
    var Artikel = document.getElementById('Artikel').value;
    var Beschreibung = document.getElementById('Beschreibung').value;
    var Lagerplatz = document.getElementById('Lagerplatz').value;
    var Bestand = document.getElementById('Bestand').value;
    var Preis = document.getElementById('Preis').value;

    window.localStorage.setItem(Schlüssel, Artikel, Beschreibung, Lagerplatz, Bestand, Preis);
  }

  function suche() {
    var Schlüssel = document.getElementById('Schlüssel').value;
    document.getElementById('Artikel').value = window.localStorage.getItem(Schlüssel);
  }
</script>

Ich danke für eure Hilfe.

Gruß

Bild zum Beitrag
Computer, HTML, JavaScript

Javascript geht nicht in einem von XMLHttpRequest geladenen Div?

Hallo ich versuche gerade mit XMLHttpRequest einen Div auf meiner Webseite zu aktuallisieren soweit geht das auch nur wenn ich versuche in der datei die geladen werden soll etwas mit Javascript auszuführen wird dies nicht getan. Ich habe aber überprüft das die datei geladen wird. Das was ich in JS geschrieben habe wird auch in den Div geladen nur nicht ausgeführt..
Hier meine Datei die den Div läd:

  <script language="javascript" type="text/javascript">
    function getData() {
      var xhr = new XMLHttpRequest();                 // Create XMLHttpRequest object
    
      xhr.onload = function() {                       // When response has loaded
        // The following conditional check will not work locally - only on a server
        if(xhr.status === 200) {                       // If server status was ok
          document.getElementById('load').innerHTML = xhr.responseText; // Update
        }
      };
      
      xhr.open('GET', 'sql/load.php', true);        // Prepare the request
      xhr.send();                                 // Send the request
    }
    
    setInterval(getData, 1000);
</script>

<div id='load'></div> 

Hier meine Load.php

<?php
session_start();
require_once "config.php";
require_once "link_user.php";
        //Check new messages
        $test = "false";
        $sql = "SELECT * FROM msg WHERE touser='$user_name' AND readmsg='$test' LIMIT 1";
        $query = mysqli_query($db_link, $sql) or die (mysqli_error());
        $num = mysqli_num_rows($query);
        while ($row = mysqli_fetch_array($query)) {
            $chat_id = $row["chat_id"];

        }
        if($num == 1){
            
echo "<script>
var notification = new Notification('Notification title', {
    icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
    body: 'Hey there! You\'ve been notified!',
   });</script>
";
        }
?>
Computer, HTML, programmieren, JavaScript, PHP

Html/CSS/Javascript Website Bild wird nicht angezeigt?

Hi, will dass das erste Bild direkt angezeigt wird und das der Beispieltext rechts steht. Wegen Zeichen kurz gehalten. Danke!

<div class="mySlides" id="expandedImg">
<img src="bilder/schuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/schönschuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/mann.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/lederschuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/basketball.jpg" style="width:35%">
</div>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="bilder/schuh.jpg" style="width:90%" onclick="currentSlide(1)" alt=""></div>
<div class="column">
<img class="demo cursor" src="bilder/schönschuh.jpg" style="width:90%" onclick="currentSlide(2)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/mann.jpg" style="width:90%" onclick="currentSlide(3)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/lederschuh.jpg" style="width:90%" onclick="currentSlide(4)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/basketball.jpg" style="width:90%" onclick="currentSlide(5)" alt="">
</div>
</div>
</div> 
<div class="text">
<a>Beispieltext</a>
<p>Beispieltext...</p>
</div>
* {box-sizing: border-box;}
.container {
position: relative;
margin-top: 80px;
}
.mySlides {
display: none;
margin-bottom: -45px;
margin-top: 65px;
margin-left: 10px;}
.cursor {cursor: pointer;}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 300px;
width: auto;
padding: 16px;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;}
.next {
right: 0;border-radius: 3px 0 0 3px;} 
.prev:hover,
.next:hover {background-color: rgba(211, 211, 211, 0.8);}
.caption-container {text-align: center; background-color: rgb(255, 255, 255);color: white;}
.row:after {content: ""; display: table; clear: both;}
.column {float: left; width: 7%;}    
.demo {opacity: 0.6;}
.active,
.demo:hover {opacity: 1;}
.row {margin-top: 65px; margin-left: 10px;}
.text {display: flex; justify-content: flex-end; width: 40%;}
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;}
Computer, HTML, programmieren, CSS, JavaScript

Was ist hier genau das Problem (Programmieren = p5.js)?

Ich habe ein Problem mit dem programmieren, da angeblich p5js sagt: There's an error due to \"keyIsDown\" not being defined in the current scope (on line 36 in jspg?

Ich habe mal meinen Code hineinkopiert und hoffe, dass jemand hier mir helfen kann. (Ist ein Projekt für die Schule).

Ich würde gerne das Programm, wie es hier steht, ohne Probleme es zum laufen zu bringen.

let v;

let b;

let n;

let m;

let vGeschwindigkeit;

let bGeschwindigkeit;

let nGeschwindigkeit;

let mGeschwindigkeit;

function setup() {

createCanvas(310, 400);

background('lightgray');

v = -200;

b = -200;

n = -200;

m = -200;

vGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen

bGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen

nGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen

mGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen

}

function draw() {

background(240); // Löscht Bild

rect(10, v, 65, 100);

fill('black');

rect(85, b, 65, 100);

fill('black');

rect(160, n, 65, 100);

fill('black');

rect(235, m, 65, 100);

fill('white');

circle(mouseX, mouseY, 10); // Mauszeigerkreis

fill('black');

}

if (keyIsDown(82)) { //taste r -> Spiel neu

setup();

}

if (mouseIsPressed) {

  rgbFarbwerte = get(mouseX, mouseY);

  if (rgbFarbwerte[0] > 0) {

  v = -200;

  b = -200;

  n = -200;

  m = -200; //Falls man den Hintergrund drückt, dann soll das Spiel nochmal von Anfang an wieder starten.

  }

}

if (mouseIsPressed) {

if (10 < mouseX && mouseX < 75 &&

v < mouseY && mouseY < v + 100) {

v = -200; //Taste 1 geht in die Ausgangslage

vGeschwindigkeit = random(6); //ändert Geschwindigkeit nochmal

}

}

if (mouseIsPressed) {

if (85 < mouseX && mouseX < 150 &&

b < mouseY && mouseY < b + 100) {

b = -200; //Taste 2 geht in die Ausgangslage

bGeschwindigkeit = random(6); //ändert Geschwindigkeit nochmal

}

}

if (mouseIsPressed) {

if (160 < mouseX && mouseX < 225 &&

n < mouseY && mouseY < n + 100) {

n = -200; //Taste 1 geht in die Ausgangslage

nGeschwindigkeit = random(6); //ändert Geschwindigkeit nochmal

}

}

if (mouseIsPressed) {

if (235 < mouseX && mouseX < 310 &&

m < mouseY && mouseY < m + 100) {

m = -200; //Taste 1 geht in die Ausgangslage

nGeschwindigkeit = random(6); //ändert Geschwindigkeit nochmal

}

}

v = v + vGeschwindigkeit;

if (v > height) {

v = -100;

vGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen für Taste 1

}

b = b + bGeschwindigkeit;

if (b > height) {

b = -100;

bGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen für Taste 2

}

n = n + nGeschwindigkeit;

if (n > height) {

n = -100;

nGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen für Taste 3

}

m = m + mGeschwindigkeit;

if (m > height) {

m = -100;

mGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen für Taste 4

}

PC, Computer, programmieren, JavaScript, Informatik, Programmiersprache

Einfaches JavaScript-Spiel per Tastendruck neu starten?

Wir hatten in der Schule den Auftrag ein einfaches JavaScript-Spiel zu programmieren. Ich will das Programm nun durch einen Druck auf die Taste "R" neu starten. Hier ist der Code:

let start,
ziel,
ballradius,
rgbFarbwerte,
x,
y;
function setup() {
  createCanvas(400, 400);
  background('black');
  stroke("white");
  start = circle(60, 390, 10);
  ziel = circle(40, 390, 10);
  ballradius = 2;
  x = 60;
  y = 390;
}
function draw() {
  //lösche bild
  background("black");
  //zeichne Spielfeld
  fill('white');
  stroke("white");
  rect(20, 300, 80, 100);
  rect(50, 300, 100, 60);
  rect(140, 260, 50, 100);
  rect(140, 240, 120, 40);
  rect(230, 170, 30, 100);
  rect(160, 160, 100, 30);
  rect(160, 40, 20, 120);
  rect(160, 40, 100, 10);
  rect(260, 1, 5, 49);
  //zeichne Start-,Endpunkt
  fill("blue");
  stroke("blue");
  circle(60, 390, 10);
  fill("red");
  stroke("red");
  circle(262.25, 10, 10);
  rgbFarbwerte = get(x, y);
  if (rgbFarbwerte[0] === 0 && rgbFarbwerte[1] === 0 && rgbFarbwerte[2] === 0) {
    background("red");
    console.clear();
    console.log("Game over");
  }
  if (rgbFarbwerte[0] === 255 && rgbFarbwerte[2] === 0) {
    background("green");
    console.clear();
    console.log("You win");
  }
  //zeichne Kreis
  stroke("lightgreen");
  fill("lightgreen");
  circle(x, y, 4);
  //steuere Kreis
  if (keyIsDown(68)) { //taste d -> nach rechts
    x = x + 2;
  }
  if (keyIsDown(65)) { //taste a -> nach links
    x = x - 2;
  }
  if (keyIsDown(87)) { // taste w -> nach oben
    y = y - 2;
  }
  if (keyIsDown(83)) { // taste s -> nach unten
    y = y + 2;
  }
}
Computer, Schule, Technik, programmieren, JavaScript, Informatik

Meistgelesene Beiträge zum Thema JavaScript