basti1012.bplaced.net

Ich sitze seit einer Woche an dem Kalender und komme nicht voran. Also, das ganze soll wie folgt funktionieren: Ein Kunde wählt sein Essen aus, wird auf diese Seite weitergeleitet und entscheidet nun, ob er sein Essen abholen oder liefern lassen möchte. 1. Problem: klickt der Kunde auf eine Uhrzeit im Bereich "Abholen", dann kann er gleichzeitig auch auf die Uhrzeiten im Bereich „Liefern lassen“ klicken. Ich habe versucht unten die Ausgabe "Ihre ausgewählte Uhrzeit: ... " ausblenden zu lassen, je nachdem in welchem Feld der Kunde rumklickt. Ich habe es wie folgt versucht "falls ... dann disable .. ansonsten enable" aber es hat nicht funktioniert, habe den code komplett gelöscht, weil ich es nochmal neu versuchen wollte. Über Tipps würde ich mich wirklich sehr freuen! 2. Problem: im Bereich Abholen werden verschiedene Uhrzeiten angezeigt, Ziel ist es, die vergangenen Uhrzeiten automatisch durchstreichen zu lassen. Ich habe versucht die Werte in einen String zu konvertieren usw. usf. :S nichts hat funktioniert, wäre das Ganze leichter, wenn ich die Uhrzeiten mit der DB verbinde oder reicht JS? Zu Problem numero 2 habe ich einiges ausprobiert und wieder gelöscht, das einzige was übrig ist: <img class="vorschau" src="image/vergleichenvomzeiten.jpg" alt="Bild">

Code

                                    
                                <style>
  #days{
  display:flex;
  flex-wrap:wrap;
  width:90%;
  max-width:410px;
  margin:0 auto;
}
.color{
  width:100px;
}
.color:disabled{
  cursor:no-drop;
}



#clock{
  width:90%;
  margin:20px auto;
  text-align:center;
  font-size:30px;
}
</style>
<div id="days" class="days"></div>
<div id="clock"></div>
<script>
  var start=10;// Startzeit
var ende=22;// Endzeit
//Buttons werden zwischen den Zeiten in 15 ;inuten Takt erstellt
//------------------------
var heute=new Date();
var hou=heute.getHours();
var min=heute.getMinutes();
var sek=heute.getSeconds();
var time=(hou*3600)+(min*60);
var rein=document.getElementById('days');
var end=(ende-start)*4;
for(g=0;g<=end;g++){
    elem=document.createElement('input');
    g1=start*3600+(g*900);
    mi=Math.floor((g1%3600) / 60);
    if(mi==0){
         mi='00';
    }
    st=Math.floor(g1 / 3600);
    if(g1<=time){
       elem.disabled=true; 
       elem.style.background='rgba(255,0,0,0.5)';
    }else{
       elem.style.background='green';
    }
    elem.type='button';
    elem.value=st+'.'+mi;
    elem.className='color';
    elem.setAttribute('data-wert',st+':'+mi);
    elem.id='zeit'+st+mi;
    rein.appendChild(elem);
}

but=document.querySelectorAll('.color');
but.forEach(function(f){
  f.addEventListener('click',function(){
     alert(f.getAttribute('data-wert'))
  })
})

var zeit=document.getElementById('clock');
setInterval(function(){
     var heute1=new Date();
     var hou1=heute1.getHours();
     var min1=heute1.getMinutes();
     var sek1=heute1.getSeconds();
       if ( hou1 < 10 ) {
          hou1 = "0"+hou1;
     }
     if ( min1 < 10 ) {
          min1 = "0"+min1;
     }
     if ( sek1 < 10 ) {
          sek1 = "0"+sek1
     }
     zeit.innerHTML=hou1+':'+min1+':'+sek1;
},1000);
</script>