# Hilfe Los-Topf in js und html



## FranziskaN (1. Nov 2021)

Hilfe!
Für eine Hausarbeit sollen wir einen Lostopf programmieren. 

zu Beginn soll eine Losnummer in einem
HTML-Formular erscheinen, wenn man sich dazu entschließt, das Los zu nehmen, erscheint die Meldung ob man gewonnen oder verloren hat - ebenfalls im HTML formuar

ich bin ziemlich lost

kann mir vielleicht jemand helfen?
Ich habe gar keine Idee, wie das funktionieren soll


----------



## mihe7 (1. Nov 2021)

Wo hakt es?


----------



## FranziskaN (1. Nov 2021)

Ich kann aktuell eine random-zahl (=losnummer) von 1 - 99 ausgeben. 
wenn diese als los „eingesetzt“ werden soll, dann soll eine Meldung erscheinen, ob es sich um einen Gewinn oder eine Niete handelt. 
das muss den Nummern ja noch irgendwie zugeordnet werden(?)
Und eine bereits „eingesetzte“ Nummer darf kein zweites Mal verwendet werden.
Keine Ahnung, wie das umgesetzte werden soll


----------



## mihe7 (1. Nov 2021)

Du hast z. B. ein Array mit 99 Losnummern. Das mischt Du kräftig durch. Dann hast Du einen Zähler, der anfangs auf 0 steht, nennen wir ihn mal runde.

In jeder Runde gibst Du einfach das Element aus, das im Array an Position runde steht. Wird ein Los "eingesetzt", entscheidet der Zufall, ob das Los gewinnt. In jedem Fall wird dann der runden-Zähler erhöht und die nächste Runde kann beginnen.


----------



## FranziskaN (1. Nov 2021)

mihe7 hat gesagt.:


> Du hast z. B. ein Array mit 99 Losnummern. Das mischt Du kräftig durch. Dann hast Du einen Zähler, der anfangs auf 0 steht, nennen wir ihn mal runde.
> 
> In jeder Runde gibst Du einfach das Element aus, das im Array an Position runde steht. Wird ein Los "eingesetzt", entscheidet der Zufall, ob das Los gewinnt. In jedem Fall wird dann der runden-Zähler erhöht und die nächste Runde kann beginnen.


Das klingt sehr gut. Das hilft mir auch echt weiter danke 
Kann mir immer so schlecht vorstellen, wie man so was lösen soll 😩🙈

Mein Array wird schon gemischt
 Aktuell gebe ich aber immer den Wert von a[1] aus, der jedes Mal ein anderer ist. 
Bei a[0] kommt die Meldung „undefined“…


----------



## mihe7 (1. Nov 2021)

Dann hast Du an 0 eben nichts gespeichert.

```
const losnummern = new Array(99);
for (let i = 0; i < losnummern.length; i++) {
    losnummern[i] = i+1;
}
```
Danach hast Du in losnummern ein Array mit Zahlen von 1 bis 99. Musst Du natürlich noch mischen.

Nachtrag:


FranziskaN hat gesagt.:


> Aktuell gebe ich aber immer den Wert von a[1] aus, der jedes Mal ein anderer ist


Dann erzeugst Du auch jedesmal neue Werte oder mischst jedesmal neu.


----------



## FranziskaN (1. Nov 2021)

mihe7 hat gesagt.:


> Dann hast Du an 0 eben nichts gespeichert.
> 
> ```
> const losnummern = new Array(99);
> ...


Jaaaa das war der Grund… fange jetzt logischerweise erst bei 0 an zu zählen 😅

Ja, ich mische jedes Mal neu… 
Es soll nur einen Button zum generieren des Loses geben - mit dem Klick darauf fülle ich den Array.
Dann müsste ich den Array schon füllen, wenn die Seite geladen wird und dann mit einen Klick die Werte von 1-99 ausgeben. 

Und diesen werten dann noch irgendwie den Gewinn oder eine Niete zuordnen.

Gott ich mache 100 Kreuze, wenn ich dieses Modul hinter mir habe 🤦‍♀️


----------



## FranziskaN (1. Nov 2021)

FranziskaN hat gesagt.:


> Jaaaa das war der Grund… fange jetzt logischerweise erst bei 0 an zu zählen 😅
> 
> Ja, ich mische jedes Mal neu…
> Es soll nur einen Button zum generieren des Loses geben - mit dem Klick darauf fülle ich den Array.
> ...


Okay, ich beantworte mir das selbst. Der Array füllt sich von alleine, beim Laden der Seite, wenn das durch keine extra Funktion aufgerufen wird. 
das heißt ich kann über den Button einfach „weiter“ klicken 🤓


----------



## mihe7 (1. Nov 2021)

Ja. Und nachdem es da keine große Forderung bzgl. Gewinn und Niete gibt, kannst Du das ja einfach per Zufall machen: `Math.random() < 0.1` wäre in 10 % der Fälle wahr...


----------



## Kamil1 (1. Nov 2021)

Hi @FranziskaN , so hätte ich das vielleicht gemacht:


```
<div id="div1">

</div>
```


```
var d = document.getElementById("div1");
for (var i = 0; i < 10; i++) {
  var row = "";
  for (var j = 0; j < 10; j++) {
    var x = i * 10 + j;
    row += '<button id="b' + x + '" onclick="ziehe(' + x + ')">' + x + '</button>';
  }
  d.innerHTML += '<p>' + row + '</p>';
}

var xs = [];
for (var i = 0; i < 100; i++) {
  xs[i] = i;
}
shuffle(xs);

function shuffle(array) {
  let counter = array.length;
  // While there are elements in the array
  while (counter > 0) {
    // Pick a random index
    let index = Math.floor(Math.random() * counter);
    // Decrease counter by 1
    counter--;
    // And swap the last element with it
    let temp = array[counter];
    array[counter] = array[index];
    array[index] = temp;
  }
  return array;
}

function ziehe(x) {
  var gewinne = 10;
  if (xs[x] < gewinne) {
    document.getElementById('b' + x).style.backgroundColor = 'green';
  } else {
    document.getElementById('b' + x).style.backgroundColor = 'red';
  }
}
```

Probiers mal aus, ist eigentlich ziemlich selbsterklärend... Es gibt 10*10 Lose in einem Grit und jedes 10. Los gewinnt...


----------



## FranziskaN (2. Nov 2021)

Kamil1 hat gesagt.:


> Hi @FranziskaN , so hätte ich das vielleicht gemacht:
> 
> 
> ```
> ...


Vielen Dank für die Antwort. 
Aber ich glaube das entspricht nicht so ganz der Anforderung 

finde meinen bisherigen Code auch ganz gut.. vor allem, weil ich ihn verstehe 😂

Mein einziges Problem ist jetzt beim auswählen einer Zufallszahl anzeigen zu lassen, ob es ein Gewinn oder eine Niete ist..


----------



## mihe7 (2. Nov 2021)

FranziskaN hat gesagt.:


> Mein einziges Problem ist jetzt beim auswählen einer Zufallszahl anzeigen zu lassen, ob es ein Gewinn oder eine Niete ist.


Na, das habe ich doch oben schon gezeigt:

```
let gewinnbenachrichtigung = Math.random() < 0.1 ? "Gewinn" : "Niete!";
```


----------



## FranziskaN (2. Nov 2021)

Sorry, das hatte nicht ganz auf dem Schirm.
also es läuft jetzt soweit, dass ich meine Lose eins nach dem anderen durchgehen kann und random durch einen weiteren Klick sagen kann, ob die entsprechende Zahl ein Gewinn oder eine Niete ist ☺️


----------



## Kamil1 (2. Nov 2021)

FranziskaN hat gesagt.:


> also es läuft jetzt soweit, dass ich meine Lose eins nach dem anderen durchgehen kann und random durch einen weiteren Klick sagen kann,


Dann ziehst du doch Lose doppelt.



FranziskaN hat gesagt.:


> Aber ich glaube das entspricht nicht so ganz der Anforderung


Du kannst mir auch gerne die Aufgabenstellung per PN senden.


----------



## FranziskaN (2. Nov 2021)

Nein, ich ziehe kein los doppelt. Habe das über 
var uniqueArray = […new Set (array)]
console.log(uniqueArray) 

gelöst

mir ist noch nicht ganz klar wie, aber jetzt gibt es keine Duplikate mehr.

Habe eher das Problemchen, dass ich meine Lose jetzt mehrmals „öffnen“ kann. 
also ich kann jedes Mal mehrmals generieren ob es ein Gewinn oder Niete ist. 😂
Das versuche ich gerade zu lösen ☺️


----------



## mihe7 (2. Nov 2021)

Du kannst ja ein zweites Array gleicher Größe anlegen und dort speichern, ob das korrespondierende Los ein Gewinn oder eine Niete ist. Außerdem besteht die Möglichkeit, Objekte zu verwenden, hier mal ein Los:

```
const los = {
    nummer: 10, /* hier stünde die Losnummer */
    gewinn: true, /* oder eben false */
};
```


----------



## FranziskaN (2. Nov 2021)

mihe7 hat gesagt.:


> Du kannst ja ein zweites Array gleicher Größe anlegen und dort speichern, ob das korrespondierende Los ein Gewinn oder eine Niete ist. Außerdem besteht die Möglichkeit, Objekte zu verwenden, hier mal ein Los:
> 
> ```
> const los = {
> ...



hab es so gelöst, dass der Eventlistener für den entsprechenden Button mit {once : True} nur einmal ausgelöst werden kann.

er wird aber jedes Mal beim weiterspringen des Arrays erneut aufgerufen, weshalb er dann beim nächsten wert wieder geklickt werden kann.

Aber die Lösung mit dem zweiten Array ist eigentlich auch ganz gut.
vielleicht werde ich das im Laufe des Semester noch ändern müssen (da die Aufgabe wohl weitergeführt werden soll)

aber erstmal bin ich ganz zufrieden damit…  gestern hätte ich noch fast geweint , weil ich absolut kein Verständnis für diese Programmieraufgaben habe 😂🙈

vielen Dank jedenfalls ☺️


----------



## FranziskaN (24. Nov 2021)

Hey,

vielleicht kann mir noch mal jemand helfen. Unser Dozent hat die Aufgabe überarbeitet und ich wollte verschiedene Optionen durch das Nutzen eines Buttons aufrufen. Leider funktioniert das nicht wirklich. 
Ich kann meine Lose aufrufen. Daraus soll durch ein formfeld explizit eins ausgewählt werden. 
Diese Nummer lasse ich dann anzeigen. 
und anschließend öffnen.
Leider komme ich danach nicht mehr weiter. 
Eigentlich will ich dann wieder die Nummern aufrufen, damit man sich eine neue auswählen kann.


----------



## mihe7 (24. Nov 2021)

Kannst Du mal den kompletten Code in Code-Tags (hier im Editor oben links auf </> klicken) posten? Gerne auch das HTML, damit man das nachvollziehen kann.


----------

