Hilfe Los-Topf in js und html

[FranziskaN]

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]

Wo hakt es?

 

[FranziskaN]

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]

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]

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]

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:

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]

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:

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

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]

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 🤦‍♀️

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]

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]

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]

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...

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]

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]

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]

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.

Aber ich glaube das entspricht nicht so ganz der Anforderung

Du kannst mir auch gerne die Aufgabenstellung per PN senden.

 

[FranziskaN]

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]

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]

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

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]

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]

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.