basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    Hallo zusammen Ich bin Rookie im Bereich der Programmierung und habe erst vor ca. einem Monat mit HTML/CSS/JS angefangen. Aus diesem Grund sehe ich manchmal die Fehler nicht und hoffe auf euren Input ^^ Ich habe eine verschachtelte If Else Funktion ( unter function holeplan() ). Irgendwie zeigt es mir immer nur die letzte Else-Funktion an. Was mache ich falsch? Danke euch! PS: Lasst euch nicht von diesen knalligen Farben irritieren, die brauchte ich als Orientierung für die Arbeit mit DIV Layouts :D wie gesagt, Rookie..

    Code

                                        
                                    <style>
     
    .container {
    	background-color:yellow;
    	}
    .containerlinksrahmen {
    	background-color:green;
    	display:inline-block;
    	vertical-align:middle;
    	margin-left:20px;
    	margin-top:20px;
    }
    .containerrechtsrahmen {
    	background-color:gray;
    	display:inline-block;
    	vertical-align:middle;
    	margin-left:20px;
    	margin-top:20px;
    }
    .containerlinks {
    	background-color:red;
    	display:inline-block;
    	width:480px;
    	vertical-align:top;
    }
    .containerrechts {
    	background-color:blue;
    	display:inline-block;
    	width:500px;
    	vertical-align:top;
    }
    .btncont {
    	width:71%;
    	background-color:red;
    }
    .btnareacontainer {
    	background-color:green;
    	width:355px;
    	height:90px;
    	margin: auto;
    	}
    .btn1 {
    	background-color:deeppink;
    	width:145px;
    	height:40px;
    	display:inline-block;
    	margin-top:20px;
    	margin-top: 15px;
    }	
    .btn2 {
    	background-color:coral;
    	width:145px;
    	height:40px;
    	display:none;
    }	
    .btnabstand {
    	background-color:red;
    	width:50px;
    	display:inline-block;
    	}
    .ersteslabel {
    	width: 260px;
    	display: inline-block;
    	font-family: Arial;
    	color: #ffffff;
    	font-size:14px;
    }
    .line{
     margin:5px;
      color:white;
    }
    .zweiteslabel {
    	width: 260px;
    	display: inline-block;
    	font-family: Arial;
    	color: #ffffff;
    	font-size:14px;
    	}
    
    input {
    	width: 120px;
    	height: 25px;
    	text-align: center;
    	font-family: Arial;
    	font-size: 14px
    }
    
    select {
      appearance: none;
      border: none;
    }
    
    select::-ms-expand {
      display: none;
    }
    
    select {
      width: 120px;
      height: 25px;
      padding-left: 5px;
      color: #000000;
      font-family: 'Arial', sans-serif;
      font-size: 14px;
      cursor: pointer;
    	border-style: solid
    	border-color: #ddcb07	
    }
    
    .titulierung {
    	color:white;
    	font-family:arial;
    	font-weight:bold;
    	}
    
    .ausgabe {
    	width: 2600px;
    	display: inline-block;
    	font-family: Arial;
    	color: #ffffff;
    	font-size:14px;
    	}
    	
    .anhangsel {
    	font-family: Arial;
    	color: #ffffff;
    	font-size:14px;
    	}
    	
    .ausgabe2 {
    	font-family: Arial;
    	font-size:14px;
    	}	
    	
    button {
    	width:100px;
    	height:30px;
    
    }
    
    button {
        background-color: #ddca07; /* Green */
      border: none;
      color: white;
      height:30px; 
      width:120px; 
      padding: 5px 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 20px;
      -webkit-transition-duration: 0.4s; /* Safari */
      transition-duration: 0.4s;
      cursor: pointer;
    }
    
    button {
      background-color: black; 
      color: white; 
      border: 1px solid #ddca07;
      width:150px;
      height:30px;
      font-size: 16px;
      font-style:bold;
    }
    
    button:hover {
      background-color: #ddca07;
      color: black;
    }
    
    .angabe {
    	color:#ddca07;
    	font-family: Arial;
    	font-size:14px;
      width:100%;
    	}
    	
    .angabe ~ span{
      float:right;
    }
    .cont0 {
    
    	width:383px;
    	color:#ddca07;
    	text-indent:5px;
    
    	
    }
    	
    .cont1 ,.cont2 {
    	color:#ddca07;
    }
    
    hr {
    	width:383px;
    	border: 1px solid #ddca07;
    	}
    
    .cont3 {
    	display:inline-block;
    	width:120px;
    	color:#ddca07;
    } 
    </style>
    <body style="background-color:#000000" >
    <div class="container" >
    	<div class="containerlinks" >
    		<div class="containerlinksrahmen">
    			<form>
    				<h3 class="titulierung" >Dein Grundbedarf</h3>
    				<div class="line"><label class="ersteslabel" for="geschlecht" id="geschlecht">Geschlecht</label>
    				<select name="geschlecht" size="1" id="geschlecht2">
    					<option value="1"> Männlich </option>
    					<option value="2"> Weiblich </option>
    				</select></div>
    			<div class="line"><label class="ersteslabel" for="groesse" id="groesse">Grösse</label>
    				<input name="groesse" type="number" id="groesse2" placeholder="180"> cm</div>
    				<div class="line"><label class="ersteslabel" for="gewicht" id="gewicht">Gewicht</label>
    				<input name="gewicht" type="number" id="gewicht2" placeholder="80"> kg</div>
    			<div class="line"><label class="ersteslabel" for="alter" id="alter">Alter</label>
    				<input name="alter" type="number" id="alter2" placeholder="25"> Jahre</div>
    			<div class="line"><label class="ersteslabel" for="zielziel" id="zielziel">Ziel</label>
    				<select name="zielziel" size="1" id="zielziel2">
    					<option value="0"> Gewicht halten </option>
    					<option value="-400"> Abnehmen </option>
    					<option value="300"> Zunehmen </option>
    				</select></div>
    			<div class="line"><label class="ersteslabel" for="weise2" id="weise">Ernährungsweise</label>
    				<select name="weise" size="1" id="weise2">
    					<option value="alles"> Allesesser/in </option>
    					<option value="veget"> Vegetarier/in </option>
    					<option value="vegan"> Veganer/in </option>
    				</select></div>
    				<hr align="left" >
    				<div class="cont1" >
    		<div class="cont2" ><span class="angabe" >Grundumsatz: </span></div><div class="cont3"> <span id="GU1" class="ausgabe2" ></span></div>
    				</div>
    			</form>
    		</div>
    	</div>
    	<div class="containerrechts" >
    		<div class="containerrechtsrahmen">
    			<form>
    					<p class="titulierung" >Deine Aktivität</p>
    					<p><label class="zweiteslabel" for="akt1" id="akt1">Schlaf</label>
    					<input class="sport" name="akt1" type="number" id="akti1" value="8.0" step="0.5" > <span class="anhangsel" > h</span></p>
    					<p><label class="zweiteslabel" for="akt2" id="akt2">Sitzen, Autofahren, Lesen, Fernsehen</label>
    					<input class="sport" name="akt2" type="number" id="akti2" value="8.0" step="0.5"> <span class="anhangsel" > h</span></p>
    					<p><label class="zweiteslabel" for="akt3" id="akt3">Langsam Gehen, leichte Verrichtungen</label>
    					<input class="sport" name="akt3" type="number" id="akti3" value="5.0" step="0.5"> <span class="anhangsel" > h</span></p>
    					<p><label class="zweiteslabel" for="akt4" id="akt4">Zügig Gehen, körperliche Arbeit</label>
    					<input class="sport" name="akt4" type="number" id="akti4" value="3.0" step="0.5"> <span class="anhangsel" > h</span></p>
    					<p><label class="zweiteslabel" for="akt5" id="akt5">Schwerarbeit</label>
    					<input class="sport" name="akt5" type="number" id="akti5" value="0.0" step="0.0"> <span class="anhangsel" > h</span></p>
    					<p><label class="zweiteslabel" for="akt6" id="akt6">Sport (pro Woche)</label>
    					<input class="sport" name="akt6" type="number" id="akti6" value="0.0" step="0.0"> <span class="anhangsel" > h</span></p>
    					<hr align="left" >
            
            
            
    					<div class="cont1" >
    	<div class="cont2" >
        <span class="angabe" >Total Stunden (ohne Sport): </span>
        <span id="TH1" for="TH1" class="ausgabe2" ></span>
    </div>
                
    <div class="cont2">
     <span class="angabe" >Durchschnittliche Aktivität pro Tag:   </span>
     <span id="AK1" for="AK1" class="ausgabe2" ></span>
    </div>
                
    <div class="cont2" >
     <span class="angabe" >Kalorienverbrauch:   </span>
    <span id="KV1" for="KV1" class="ausgabe2" ></span>
    </div>
                
    <div class="cont2" >
      <span class="angabe" >Zielzufuhr:   </span>
     <span id="ZZ1" for="ZZ1" class="ausgabe2" ></span>
    </div>
    					</div>
    				<hr align="left" >
    			</form>
    		</div>
    	</div>
      
      
      
    	<div class="btncont">
    		<div class="btnareacontainer">
    			<div class="btn1">
    				<button type="button" id="btn">Berechnen</button>
    			</div>
    			<div class="btnabstand"></div>
    			<div class="btn2" id="btn2cont">
    				<button type="button" id="btn2">Plan holen</button>
    			</div>
    		</div>
    	</div>
      
    	<div id="outiputi"></div>
    </div>
      <script>
        var zielzufuhr,out;
    document.getElementById('btn').addEventListener('click',function(){
      berechnung();
    })
    document.getElementById('btn2').addEventListener('click',function(){
     holeplan()
    })
    
    
    function berechnung() {
      var plus=0;
    	var groesse = parseInt(document.getElementById('groesse2').value);
    	var gewicht = parseInt(document.getElementById('gewicht2').value);
    	var alter = parseInt(document.getElementById('gewicht2').value);
    	var geschlecht = document.getElementById('geschlecht2').value;
    	var ziele = parseInt(document.getElementById('zielziel2').value);
      var sportts=['schlaf','sitzen','gehen1','gehen2','sport3','sport4'];
      i=0;
      document.querySelectorAll('.sport').forEach(function(el){
               sportts[i]=el.value;
               i++;
               plus+=parseInt(el.value);
      })	
      if(geschlecht == 1){
         var grundumsatz = Math.round(66.47+(13.7*gewicht)+(5*groesse)-(6.8*alter));
      }else{
         var grundumsatz = Math.round(655.1+(9.6*gewicht)+(1.8*groesse)-(4.7*alter));
      }
      
      var dakt = Math.round((((sportts[0]*0.9)+(sportts[1]*1.2)+(sportts[2]*2.2)+(sportts[3]*3.3)+(sportts[4]*6.6))/plus)*1000) / 1000 ;
      var verbrauch = Math.round((grundumsatz * dakt)+((sportts[5]*5)/7));	
    		
    	zielzufuhr=verbrauch + ziele;
    	if (isNaN(grundumsatz)) {
            grundumsatz = "keine" ;
      }
    	if (isNaN(verbrauch)) {
            verbrauch = "keine" ;
      }
    	if (isNaN(zielzufuhr)) {
            zielzufuhr = "keine" ;
      }
    	document.getElementById("TH1").innerHTML = plus + " h";
    	document.getElementById("GU1").innerHTML = grundumsatz + " kcal";
    	document.getElementById("AK1").innerHTML = dakt + " MET";
    	document.getElementById("KV1").innerHTML = verbrauch + " kcal";
    	document.getElementById("ZZ1").innerHTML = zielzufuhr + " kcal";
    
    
      var zufuhrv = document.getElementById("ZZ1").innerHTML;
      if(zufuhrv === "keine kcal") {
             alert("Bitte alle Daten zu deinem Grundbedarf eingeben");
      }else{ 
            document.getElementById("btn2cont").style.display = "inline-block";
      }
    }
    
    function holeplan() {
      var zielzu=zielzufuhr;
      var wei = document.getElementById('weise2').value;
      var erg=[1500,1700,1900,2100,2300,2500,2700,2900,3100,3300,3500,3700];
      for(g=0;g<14;g++){
          if(zielzu > erg[g] && zielzu < erg[g+1]){
             out=erg[g]+' bis '+erg[g+1]+' und '+wei;
          }
      }
      if(zielzu > 3700 || zielzu < 1500){
           out="Keine Pläne vorhanden";
      }
      document.getElementById("outiputi").innerHTML=out;
    }
      
      
      
      
      
      
     /* 
     	//var geschl1 = (geschlecht === '2') ? 655.1 : 66.47 ;
    	//var geschl2 = (geschlecht === '2') ? 9.6 : 13.7 ;
    	//var geschl3 = (geschlecht === '2') ? 1.8 : 5 ;
    	//var geschl4 = (geschlecht === '2') ? 4.7 : 6.8 ;
     
     //timetimer();// (schlaf + sitzen + gehen1 + gehen2 + sport3);
      
      
    var dakt = Math.round((((schlaf*0.9)+(sitzen*1.2)+(gehen1*2.2)+(gehen2*3.3)+(sport3*6.6))/totalstunden)*1000) / 1000 ;
    var verbrauch = Math.round((grundumsatz * dakt)+((sport4*5)/7));	
    		
      
     //}
    	
     
    function timetimer() {
        var plus=0;
        document.querySelectorAll('.sport').forEach(function(el){
           plus+=parseInt(el.value);
        })
      console.log(plus)
        return plus;
     
      
      
    	var schlaf10 = parseInt(document.getElementById('akti1').value);
    	var sitzen10 = parseInt(document.getElementById('akti2').value);
    	var gehen110 = parseInt(document.getElementById('akti3').value);
    	var gehen210 = parseInt(document.getElementById('akti4').value);
    	var sport310 = parseInt(document.getElementById('akti5').value);
    	var sport410 = parseInt(document.getElementById('akti6').value);
    
    	var totalitat = (schlaf10 + sitzen10 + gehen110 + gehen210 + sport310);
      	document.getElementById("TH1").innerHTML = totalitat + " h";
      
     
     
       
      
      
    //	var grundumsatz = geschlecht === 1 ?
    //    Math.round(66.47 + (13.7 * gewicht) + (5 * groesse) - (6.8 * alter)) :
    //    Math.round(655.1 + (9.6 * gewicht) + (1.8 * groesse) - (4.7 * alter)); 
    	
    //	var verbrauch = Math.round((grundumsatz * dakt)+((sport4*5)/7));
     
     
     //	var schlaf = parseInt(document.getElementById('akti1').value);
    //	var sitzen = parseInt(document.getElementById('akti2').value);
    //	var gehen1 = parseInt(document.getElementById('akti3').value);
    //	var gehen2 = parseInt(document.getElementById('akti4').value);
    //	var sport3 = parseInt(document.getElementById('akti5').value);
    //	var sport4 = parseInt(document.getElementById('akti6').value);
    	
     
     
    var grundum;
    
    	var gr = parseInt(document.getElementById('groesse2').value);
    	var ge = parseInt(document.getElementById('gewicht2').value);
    	var al = parseInt(document.getElementById('alter').value);
    	var geschlecht = parseInt(document.getElementById('geschlecht2').value);
    	var ge1 = (geschlecht === '2') ? 655.1 : 66.47 ;
    	var ge2 = (geschlecht === '2') ? 9.6 : 13.7 ;
    	var ge3 = (geschlecht === '2') ? 1.8 : 5 ;
    	var gel4 = (geschlecht === '2') ? 4.7 : 6.8 ;
      
    	var zi = parseInt(document.getElementById('zielziel2').value);
    	var wei = document.getElementById('weise2').value;
    	
    	var schl = parseInt(document.getElementById('akti1').value);
    	var sitz = parseInt(document.getElementById('akti2').value);
    	var geh1 = parseInt(document.getElementById('akti3').value);
    	var geh2 = parseInt(document.getElementById('akti4').value);
    	var spo3 = parseInt(document.getElementById('akti5').value);
    	var spo4 = parseInt(document.getElementById('akti6').value);
    	
    	
    	
    	var grundumm = Math.round(66.47 + (13.7 * ge) + (5 * gr) - (6.8 * al));
    	var grundumw = Math.round(655.1 + (9.6 * ge) + (1.8 * gr) - (4.7 * al));
    	var totalstd = (schl + sitz + geh1 + geh2 + spo3);
    	var daktiv = Math.round((((schl*0.9)+(sitz*1.2)+(geh1*2.2)+(geh2*3.3)+(spo3*6.6))/totalstd)*1000) / 1000 ;
    	
    		
    	 
    if(ge === 1){
        grundum =Math.round(66.47 + (13.7 * ge) + (5 * gr) - (6.8 * al)) ;
    }else{
        grundum =Math.round(655.1 + (9.6 * ge) + (1.8 * gr) - (4.7 * al)); 
    }
    	var verbr = Math.round((grundum * daktiv)+((spo4*5)/7));
      console.log(verbr)
    	var zielzu = verbr + zi;
    
    console.log(zielzu+''+wei)
    var out;
      if(zielzu<=1499){
       // alert('Deine Angaben sind zu klein, Bastis eingabe');
        return
      }
      */
      
      
      /*
    if(wei=="alles"){
      if(zielzu > 1500 && zielzu < 1700){
         out="1500 bis 1700 und Allesesser";
      }else if(zielzu > 1700 && zielzu < 1900){
         out="1701 bis 1900 und Allesesser";
      }else if(zielzu > 1900 && zielzu < 2100){
         out="1901 bis 2100 und Allesesser";
      }else if(zielzu > 2100 && zielzu < 2300){
         out="2101 bis 2300 und Allesesser";
      }else if(zielzu > 2300 && zielzu < 2500){
         out="2301 bis 2500 und Allesesser";
      }else if(zielzu > 2500 && zielzu < 2700){
         out="2501 bis 2700 und Allesesser";
      }else if(zielzu > 2700 && zielzu < 2900){
         out="2701 bis 2900 und Allesesser";
      }else if(zielzu > 2900 && zielzu < 3100){
         out="2901 bis 3100 und Allesesser";
      }else if(zielzu > 3100 && zielzu < 3300){
         out="3101 bis 3300 und Allesesser";
      }else if(zielzu > 3300 && zielzu < 3500){
         out="3301 bis 3500 und Allesesser";
      }else if(zielzu > 3500 && zielzu < 3700){
         out="3501 bis 3700 und Allesesser";
      }
    }else if(wei=="veget"){
      if(zielzu > 1500 && zielzu < 1700){
         out="1500 bis 1700 und Vegetarier/in";
      }else if(zielzu > 1700 && zielzu < 1900){
         out="1701 bis 1900 und Vegetarier/in";
      }else if(zielzu > 1900 && zielzu < 2100){
         out="1901 bis 2100 und Vegetarier/in";
      }else if(zielzu > 2100 && zielzu < 2300){
         out="2101 bis 2300 und Vegetarier/in";
      }else if(zielzu > 2300 && zielzu < 2500){
         out="2301 bis 2500 und Vegetarier/in";
      }else if(zielzu > 2500 && zielzu < 2700){
         out="2501 bis 2700 und Vegetarier/in";
      }else if(zielzu > 2700 && zielzu < 2900){
         out="2701 bis 2900 und Vegetarier/in";
      }else if(zielzu > 2900 && zielzu < 3100){
         out="2901 bis 3100 und Vegetarier/in";
      }else if(zielzu > 3100 && zielzu < 3300){
         out="3101 bis 3300 und Vegetarier/in";
      }else if(zielzu > 3300 && zielzu < 3500){
         out="3301 bis 3500 und Vegetarier/in";
      }else if(zielzu > 3500 && zielzu < 3700){
         out="3501 bis 3700 und Vegetarier/in";
      }     
    }else if(wei=="vegan"){  
      if(zielzu > 1500 && zielzu < 1700){
         out="1500 bis 1700 und Veganer/in";
      }else if(zielzu > 1700 && zielzu < 1900){
         out="1701 bis 1900 und Veganer/in";
      }else if(zielzu > 1900 && zielzu < 2100){
         out="1901 bis 2100 und Veganer/in";
      }else if(zielzu > 2100 && zielzu < 2300){
         out="2101 bis 2300 und Veganer/in";
      }else if(zielzu > 2300 && zielzu < 2500){
         out="2301 bis 2500 und Veganer/in";
      }else if(zielzu > 2500 && zielzu < 2700){
         out="2501 bis 2700 und Veganer/in";
      }else if(zielzu > 2700 && zielzu < 2900){
         out="2701 bis 2900 und Veganer/in";
      }else if(zielzu > 2900 && zielzu < 3100){
         out="2901 bis 3100 und Veganer/in";
      }else if(zielzu > 3100 && zielzu < 3300){
         out="3101 bis 3300 und Veganer/in";
      }else if(zielzu > 3300 && zielzu < 3500){
         out= "3301 bis 3500 und Veganer/in";
      }else if(zielzu > 3500 && zielzu < 3700){
        out="3501 bis 3700 und Veganer/in";
      } 
    }else{
       out="Keine Pläne vorhanden";
    }
    */
    
      </script>
    </body>