Untitled

<!DOCTYPE html>
<html lang="de">
<head>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<title>Abakus</title>
<!-- <link href="style.css" rel="stylesheet"> -->


</head>
<body>
	<div id="Container" class="Container ">
		<div class="Stange_Zehntausender" id="Stange">
			<div id="ue" class="Kugeln Stayleft"></div>
			<div id="9" class="Kugeln Stayleft"></div>
			<div id="8" class="Kugeln Stayleft"></div>
			<div id="7" class="Kugeln Stayleft"></div>
			<div id="6" class="Kugeln Stayleft"></div>
			<div id="5" class="Kugeln Stayleft"></div>
			<div id="4" class="Kugeln Stayleft"></div>
			<div id="3" class="Kugeln Stayleft"></div>
			<div id="2" class="Kugeln Stayleft"></div>
			<div id="1" class="Kugeln Stayleft"></div>

		</div>

		<div class="Stange_Tausender" id="Stange">
			<div id="ue" class="Kugeln Stayleft"></div>
			<div id="9" class="Kugeln Stayleft"></div>
			<div id="8" class="Kugeln Stayleft"></div>
			<div id="7" class="Kugeln Stayleft"></div>
			<div id="6" class="Kugeln Stayleft"></div>
			<div id="5" class="Kugeln Stayleft"></div>
			<div id="4" class="Kugeln Stayleft"></div>
			<div id="3" class="Kugeln Stayleft"></div>
			<div id="2" class="Kugeln Stayleft"></div>
			<div id="1" class="Kugeln Stayleft"></div>

		</div>

		<div class="Stange_Hunderter" id="Stange">
			<div id="ue" class="Kugeln Stayleft"></div>
			<div id="9" class="Kugeln Stayleft"></div>
			<div id="8" class="Kugeln Stayleft"></div>
			<div id="7" class="Kugeln Stayleft"></div>
			<div id="6" class="Kugeln Stayleft"></div>
			<div id="5" class="Kugeln Stayleft"></div>
			<div id="4" class="Kugeln Stayleft"></div>
			<div id="3" class="Kugeln Stayleft"></div>
			<div id="2" class="Kugeln Stayleft"></div>
			<div id="1" class="Kugeln Stayleft"></div>

		</div>

		<div class="Stange_Zehner" id="Stange">
			<div id="ue" class="Kugeln Stayleft"></div>
			<div id="9" class="Kugeln Stayleft"></div>
			<div id="8" class="Kugeln Stayleft"></div>
			<div id="7" class="Kugeln Stayleft"></div>
			<div id="6" class="Kugeln Stayleft"></div>
			<div id="5" class="Kugeln Stayleft"></div>
			<div id="4" class="Kugeln Stayleft"></div>
			<div id="3" class="Kugeln Stayleft"></div>
			<div id="2" class="Kugeln Stayleft"></div>
			<div id="1" class="Kugeln Stayleft"></div>

		</div>

		<div class="Stange_Einer" id="Stange">
			<div id="ue" class="Kugeln Stayleft"></div>
			<div id="9" class="Kugeln Stayleft"></div>
			<div id="8" class="Kugeln Stayleft"></div>
			<div id="7" class="Kugeln Stayleft"></div>
			<div id="6" class="Kugeln Stayleft"></div>
			<div id="5" class="Kugeln Stayleft"></div>
			<div id="4" class="Kugeln Stayleft"></div>
			<div id="3" class="Kugeln Stayleft"></div>
			<div id="2" class="Kugeln Stayleft"></div>
			<div id="1" class="Kugeln Stayleft"></div>

		</div>
	</div>

<div class="Rechenfeld">

<div class="Zahl" >0</div>

		 <select class="Rechenzeichen">
			<option value="minus">-</option>
			<option value="plus">+</option>
		</select> <input type="text" class="Eingabe">

	<div class="istgleich">
		<button type="button" class="Ergebnis">=</button>
	</div>
	<span class="ergebnis"></span>
</div>
<script>


// Rechner
$(".Ergebnis").click(function(){
	var Zahl = $(".Zahl").text()
	var Eingabe = $(".Eingabe").val()
    var zahl1 = parseInt(Zahl)
    var zahl2 = parseInt(Eingabe)
    var Rechenzeichen = $(".Rechenzeichen").val()
    var ergebnis = 0

    if(Rechenzeichen==="minus"){
        ergebnis = zahl1-zahl2
    }
    else if(Rechenzeichen==="plus"){
        ergebnis = zahl1+zahl2
    }
	 $(".ergebnis").text(ergebnis)

});

</script>

	<script>
		$(document).ready(
				function() {


					$(".Kugeln").click(
							function() {


					// Onclick funktionen
								if ($(this).hasClass("Stayleft")) {
									$(this).removeClass("Stayleft").nextAll().removeClass("Stayleft");
									$(this).addClass("Stayright").nextAll().addClass("Stayright");

								}

								else if ($(this).hasClass("Stayright")) {
									$(this).removeClass("Stayright").prevAll().removeClass("Stayright");
									$(this).addClass("Stayleft").prevAll().addClass("Stayleft");
								}

								else if($(".Stange_Einer").children("div:first-of-type").hasClass("Stayright")){
										$(this).hasClass("Stayright").toggleFunction()

										$(this).removeClass("Stayright").prevAll().removeClass("Stayright");
										$(this).addClass("Stayleft").prevAll().addClass("Stayleft");
									}


					// Array des die Kugeln der jeweiligen Stange enthält mit der Klasse Stayright
								var zahl = [];

								zahl[0] = $(".Stange_Einer").children(".Stayright").length;
								zahl[1] = $(".Stange_Zehner").children(".Stayright").length;
								zahl[2] = $(".Stange_Hunderter").children(".Stayright").length;
								zahl[3] = $(".Stange_Tausender").children(".Stayright").length;
								zahl[4] = $(".Stange_Zehntausender").children(".Stayright").length;


								$( ".Zahl").text( + (zahl[4]*10000) + (zahl[3]*1000) + (zahl[2]*100) + (zahl[1]*10) + zahl[0] );


								//Übertrag


							});


				});


	</script>


</body>
</html>