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

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

Gho5txx

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

11.09.2021, 00:50

Ist jetzt nicht der sauberste Code, nimm dir daran also kein Beispiel :D

https://jsfiddle.net/xke3zrs1/

 // Die Funktion die bei einer Änderung der Auswahlliste aufgerufen wird
function summieren() {
  // Alle Auswahl Elemente holen
  var auswahllisten = document.getElementsByClassName("auswahl");


	// Die Ergebnis Variable setzen mit dem Wert deiner Vorgabe
  // "Number" ist hier erforderlich da JavaScript sonst mit Strings rechnet und diese concatiniert
  var ergebnis = Number(document.getElementById("vorgabe").value);


  // Die Auswahl Elemente durchlaufen
  for (i = 0; i < auswahllisten.length; i++) {
  	// Den jeweils ausgewählten Wert auf das Ergebnis aufrechnen
    ergebnis += Number(auswahllisten[i].value);
  }
  
  // Das Gesamtergebnis ausgeben
  // "toFixed" rundet das Ergebnis, da JS aus (0,60 + 0,65 + 0,95 + 0,60) z.B 2.8000000000000003 macht
	document.getElementById("ergebnis").innerHTML = ergebnis;
}

Mit Zeit kommt Übung. Selbst würde ich JQuery dafür nutzen. Macht alles deutlich einfacher zu lesen und weniger zu schreiben :)

Woher ich das weiß:Hobby

4n0nym3r

Fragesteller

11.09.2021, 08:47

Hallo Gho5txx,

vielen Dank für diese unfassbar tolle Hilfe!

Ich hätte da noch ein paar Fragen:

Besteht die Möglichkeit, bei dem Endergebnis aus dem Punkt ein Komma machen zu lassen? Und kann ich den Startwert schon im Script festlegen, sodass dieser vorher nicht manuell eingegeben muss? Der Startwert ist immer derselbe (1,75 €).

Ich würde mich freuen, wenn das irgendwie funktioniert. :)

Beste Grüße
4n0nym3r

Gho5txx

11.09.2021, 12:28

@4n0nym3r

Und kann ich den Startwert schon im Script festlegen, sodass dieser vorher nicht manuell eingegeben muss? Der Startwert ist immer derselbe (1,75 €).

Logisch, ersetze einfach das "document.getElementById("vorgabe").value" durch 1.75

Besteht die Möglichkeit, bei dem Endergebnis aus dem Punkt ein Komma machen zu lassen?

Natürlich. Wenn es Währung ausgegeben werden soll, dann damit:

document.getElementById("ergebnis").innerHTML = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(ergebnis);

de-DE steht für das Deutsche Format. "currency" für Währung und "EUR" logischerweise für die Art der Währung.

4n0nym3r

Fragesteller

11.09.2021, 15:17

@Gho5txx

Super, vielen Dank für die Hilfe! :)

Ich will, dass wenn man 2020/2021 aussucht, das Jahr 2018 herauskommt. Aber nicht in einem neuen Tab, sondern auf der Webseite!

das Jahr 2018 soll nicht in einem neuen Fester stehen, sondern einfach auf dem Formular

$("select[name=Symp]").change(function () {
  if ($(this).val().length > 0) {
    var sj = $(this).val().toString().split('/');
    alert((parseFloat(sj[0]) - 2));
  }
});

<div class="row" style="height: 28px;">
  <div class="form-inline">
    <div class="col-xs-12">
      <div class="form-group">
        <label for="Symp"><h4><b>im Schuljahr:</b></h4></label>
        {if $pdf}
          <input type="text" class="form-control" style="width:3cm"; name="Symp" value="{$values.Symp}">
        {else}
          <select class="form-control" name="Symp">
            <option value="" selected=""></option>
            <option value="2020/2021">2020/2021</option>
            <option value="2021/2022">2021/2022</option>
            <option value="2022/2023">2022/2023</option>
          </select>
        {/if}
      </div>
    </div>
  </div>
</div>

...zur Frage

JavaScript - <select> andere <option> ausgrauen?

Hallo zusammen,

brauche nochmal einen Denkanstoß :)

Ich habe zwei Mal <select></select>, die sozusagen in Reihe funktionieren sollen. Wenn ich jetzt beim ersten select eine Option auswähle, soll die eine option bei der zweiten select disable=disabled werden.

Zur Vorstellung:

<select>
<option value="nike">Nike</option>
<option value="reebok">Reebok</option>
</select>

<select>
<option value="sneaker">Sneaker</option>
<option value="fußballschuhe">Fußballschuhe</option>
</select>

-> bei dem Beispiel soll z.B. bei der Auswahl "Nike" im ersten, beim zweiten beide optionen angezeigt werden. Wähle ich hingegen "Reebok" aus, soll im zweiten Select nur die Auswahl "Sneaker" gemacht werden können, also "Fußballschuhe" ausgeschaltet.

Wie gehe ich da vor? Mit den Ansätzen aus dem Internet komme ich noch nicht weiter, dafür ist mein Know-How nicht groß genug. :)

Vielen Dank!
Gruß

...zur Frage

JavaScript: Text nach Button-Klick in Textfeld?

Ich habe so eine Seite :

<li class="items">
    <p>some text 1</p>
    <div><button class="link" value="1">Wählen</a></div>
</li>
<li class="items">
    <p>some text 2</p>
    <div><button class="link" value="2">Wählen</a></div>
</li>
<li class="items">
    <p>some text 3</p>
    <div><button class="link" value="3">Wählen</a></div>
</li>



<form action="send" method="POST">
    <input type="text" name="text" id="text" required>
    <input type="number" name="zahl" id="zahl">
    <button type="submit" name="submit">Senden</button>
</form>

oben sind mehrere Texte mit je einem Button zum Auswählen (derzeit ohne funktion). Unten ist dann ein Formular und man kann selbst die Zahl des Textes dort eintragen.

Jetzt will ich das aber für leute vereinfachen und ermöglichen, dass man einfach auf den jeweiligen Button klickt und dann die Zahl (das value des Buttons) in das textfeld "number" eingetragen wird. Wie kann ich das mit javascript machen ? außerdem sollte der cursor direkt in das textfeld "text" gehen.

...zur Frage

Wie kann ich eine Mehrfachauswahl für option-Elemente einrichten?

Hallo Leute,

und zwar habe ich eine Seite erstellt, wo ich das Problem habe, dass ich nicht weiß, wie ich in diesem Beispiel von unten so einstellen kann, dass ich mehr als nur eine Option auswählen kann. Der Code steht unten.

<label class="sr-only">Hobbies<span class="red">*</span></label>
<select type="select" name="hobbies" aria-required="true" role="combobox" aria-multiline="true" aria-labelledby="hobbies" aria-placeholder="Hobbies" required>
  <option role="option" data-code="" value="">Abhängen</option>
  <option role="option" data-code="angeln" value="angeln">Angeln</option>
  <option role="option" data-code="anime&Manga" value="anime&Manga">Anime & Manga</option>
  <option role="option" data-code="" value="">Aquaristik</option>
  <option role="option" data-code="" value="">Architektur</option>
  <option role="option" data-code="" value="">Arrowtag</option>
  <option role="option" data-code="" value="">Astrologie</option>
  <option role="option" data-code="" value="">Astronomie</option>
  <option role="option" data-code="" value="">Backen</option>
  <option role="option" data-code="" value="">Badminton</option>
  <option role="option" data-code="" value="">Ballett</option>
  <option role="option" data-code="" value="">Bartending</option>
  (...)
</select>

...zur Frage

Value auf "2" setzen, sonst auf "1"?

Wenn man die Checkbox auswählt, soll ein value "2" kommen, sonst wenn es nicht ausgewählt wird, dann value "1"

                                                                                  <div class="col-xs-4">{if $pdf}<span class="span-checkbox{if isset($values.Krank_0)} span-checkbox-checked{/if}"></span> Masern{else}<label class="checkbox-inline"><input type="checkbox" name="Masern" id="Masern" value="1"> Masern</label>{/if}</div>

...zur Frage

HTML multi select nur einen von mehreren auswählen?

Hallo zusammen,
ich will ein multiselect haben, mit mehreren values wie season (Jahreszeit). Dabei soll man natürlich aber nur eine der 4 ankreuzen können. Klar könnte man es jetzt als nicht multi machen, allerdings sind in dem multiselect auch Sachen drinnen wie ob es ein See ist oder Berge sind, was man ja auch noch ankreuzen kann.

<option value="season" >Option 1</option>

<option value="season">Option 2</option>

<option value="season">Option 3</option>

<option value="season">Option 4</option>

</select>

Und man soll halt hier vom value season nur 1 auswählen können aber gleichzeitig halt sea trz noch zusätzlich. Ist das irgendwie machbar?

...zur Frage

HTML Selct value zu einer PHP Variable?

Naive wie ich bin habe ich es ausprobiert. Wie geschrieben brauche ich das ausgewählte im selsct, wenn es geht bitte in keinem form als PHP variable und zwar als $js.

<select id="trans" name="trans" onchange="<?= $js ?> = this.value">

<option value="de">Deutsch</option>

<option value="en">Englisch</option>

<option value="fr">Französisch</option>

<option value="es">Spanisch</option>

<option value="co">Koreanisch</option>

<option value="jp">Japanisch</option>

<option value="cn">Chinesisch</option>

</select>

Hier mal mein Versuch.

...zur Frage

CSS Grid leere Zelle?

Hi,

bin gerade etwas Ratlos wie ich das mit css grid umsetzen kann.

Aktuelle habe ich folgenden Code

<div class="grid-container">
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <input type="text" class="grid-item">
  <div class="grid-item">Ein Text</div>
  <select class="grid-item"></select>
  <div class="grid-item">Ein Text</div>
</div>

CSS 
.grid-container {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(4, 1fr);
}

https://jsfiddle.net/tb2e75L8/2/

Jetzt will ich jedoch alle Div's mit dem Inhalt "Ich soll leer sein" aus dem html entfernen ohne jedoch die nachfolgenden zu verschieben. Also sozusagen eine Leere Zelle. Ich habe schon über grid-template-areas nachgelesen, jedoch bräuchte ich da für jedes item eine eigene ID, oder sehe ich das falsch?

Für sonstige Vorschläge zum realisieren von diesem Layout (auch ohne Grid) bin ich grundsätzlich auch offen.

Vielen Dank im Voraus

whgoffline

...zur Frage

HTML: Was muss ich tun, damit dieser schwarzer Strich nur bis zum Menü geht (nicht darüber) und wie kann ich das Menü zentral ausrichten?

Hallo,

was muss ich tun, damit dieser schwarzer Strich nur bis zum Menü geht und nicht darüber? Und wie kann ich das Menü zentral ausrichten, also damit die nicht links sind, sondern mittig?

Strich:

.vl {
  border-left: 2px solid black;
  height: 4000px;
  position: fixed;
  left: 18%;
  margin-left: -3px;
  top: 0;
}

Menü:

<ul>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Mods</a>
    <div class="dropdown-content">
      <a href="#">Bedrock mods</a>
      <a href="#">Java mods</a>
  <li><a href="#home">Skins</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Seeds</a>
    <div class="dropdown-content">
      <a href="#">Bedrock seeds</a>
      <a href="#">Java seeds</a>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Maps</a>
    <div class="dropdown-content">
      <a href="#">Bedrock maps</a>
      <a href="#">Java maps</a>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Texture packs</a>
    <div class="dropdown-content">
      <a href="#">Bedrock Textures</a>
      <a href="#">Java Textures</a>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Guide</a>
    <div class="dropdown-content">
      <a href="#">..................</a>
      <a href="#">..............</a>
    </div>
  </li>
</ul>

...zur Frage

Java Script wird nicht ausgeführt?

hallo, und zwar wird bei mir nicht Java Script ausgeführt. Könnt ihr mir helfen woran dass liegt???

HTML:

<!DOCTYPE html>

<head>

</head>

<body>

<h1 id="title">Today's Quiz</h1>

</ol>

</div>

</div>

<h2 id="score-title">Your Score</h2>

<button type="button" id="check-answer" onclick="checkAnswer()">Check Answers</button>

</div>

<h2>Answers :</h2>

</ol>

</div>

</body>

</html>

JAVA SCRIPT:

...zur Frage

JavaScript will nicht (Text in Element ändern per onclick)?

Hallo alle miteinander,

ich tüftle derzeit daran, den Text eines Elements zu ändern, sobald im unteren Menü ein Feld angeklickt wurde. Das Ganze funktioniert jedoch nicht und ich verstehe nicht wirklich warum. Könnt ihr mir helfen den Fehler zu finden?

Die wli-Variablen sollen den neuen Text enthalten, da ich das für jemanden programmiere, der keine Ahnung von JavaScript hat und ich es somit vereinfachen wollte, das er den Text ohne etwas kaputt zu machen, bearbeiten kann.

Hier einmal der Code, an dem ich herumprobiert habe. Allerdings ohne den CSS-Teil:

<script type="text/javascript">
  wli1 = "wli1";
  wli2 = "wli2";
  wli3 = "wli3";
  wli4 = "wli4";
  wli5 = "wli5";
  wli6 = "wli6";

  function fwli1() {
    document.getElementById("werdegangcon").value = wli1;
  }

  function fwli2() {
    document.getElementById("werdegangcon").value = wli2;
  }

  function fwli3() {
    document.getElementById("werdegangcon").value = wli3;
  }

  function fwli4() {
    document.getElementById("werdegangcon").value = wli4;
  }

  function fwli5() {
    document.getElementById("werdegangcon").value = wli5;
  }

  function fwli6() {
    document.getElementById("werdegangcon").value = wli6;
  }
</script>
<div class="conh15">
  <div class="con100">
    <div class="con_top center nummer">
      <h3>Werdegang</h3>
    </div>
    <div class="con_mid center" id="werdegangcon">
      2394    Abschluss des Abiturs mit Auszeichnung</br>
      2394    Job als Haustechnikerin
    </div>
    <div class="con_bot center">
      <ul class="werdegang">
        <li id="weli1" onclick="fwli1()">vor der Akademie</li>
        <li id="weli2" onclick="fwli2()">2395</li>
        <li id="weli3"onclick="fwli3()">2399</li>
        <li id="weli4"onclick="fwli4()">2401</li>
        <li id="weli5"onclick="fwli5()">2402</li>
        <li id="weli6" onclick="fwli6()">2403</li>
      </ul>
    </div>
  </div>
</div>

...zur Frage

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;}

...zur Frage

Webseite: Kennt sich jemand damit aus?

Und zwar brauche ich kurz hilfe. Ich möchte dass man im Registrier-Formular ein Profilbild auswählen kann. Wenn man Angemeldet ist, soll das eigene PB oben rechts in der Ecke angezeigt werden.

HTML-Code (Formular):

<div class="container">
      <div class="box">
		  <div class="scroll">
        <form action="" method="POST" class="login-email">
          <p class="login-text">Registrieren</p>
		<div class="profile-pic-div">
            <img src="img/default-pb.jpg" id="photo">
			<input type="file" id="file">
			<label for="file" id="uploadBtn">Profilbild Wählen</label>
          </div>
          <div class="input-group">
            <input type="text" placeholder="Benutzername" name="username" value="<?php echo $username; ?>" required>
          </div>
          <div class="input-group">
            <input type="email" placeholder="Email" name="email" value="<?php echo $email; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Passwort" name="password" value="<?php echo $_POST['password']; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Wiederhole das Passwort" name="cpassword" value="<?php echo $_POST['cpassword']; ?>" required>
          </div>
          <div class="input-group">
           <button name="submit" class="login-btn">Registrieren</button>
          </div>
          <p class="login-register-text">Du hast bereits ein Konto? <a href="https://www.klexxstube.com/anmelden">Melde dich an</a></p>
        </form>
			 </div>
      </div>
    </div>

Hier der Code zum Wechseln vom PB (JS):

const imgDiv = document.querySelector('.profile-pic-div');
const img = document.querySelector('#photo');
const file = document.querySelector('#file');


file.addEventListener('change', function() {
	const choosedFile = this.files[0];
	
	if (choosedFile) {
		
		const reader = new FileReader();
		
		reader.addEventListener('load', function() {
			img.setAttribute('src', reader.result);
		});
		
		reader.readAsDataURL(choosedFile);
	}
});

Vielleicht habt ihr auch eine komplett andere Version wie man so etwas schaffen kann.

LG Klexxsy

...zur Frage

JavaScript: Bei jedem Klick plus 1 in der resultArea?

Moin, ich habe einen Button gemacht und zwar:

<div onclick="play()" class="button">
  <button class="button1">
    Bam
  </button>
</div>

und eine Result Area

<div id="resultArea"></div>

Wie kann ich es machen, dass bei jedem Klick auf den Button in der Result Area 1 addiert wird (sowas wie ein Cookie-Klicker)? Also so eine Art Counter.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen