Hallo zusammen,
ich bin Java/HTML/CSS Anfänger und will für ein privates Projekt eine simple Website bauen. Wie die Website strukturell aussehen soll, habe ich in diesem Bild zusammengefasst (Bild1 im Anhang):
Zur Erklärung: Oben sind vier Buttons zu sehen, denen ein Wert zugeordnet ist. Darunter ist eine Eingabemaske, in der die geklickten Buttons in der geklickten Reihenfolge eingetragen werden, also eine Art "Button-Click-Logbuch".
Im Feld darunter bzw. in der freien Fläche soll der eingegebene Code ein Bild ausspucken. Die Bilder in meinem Zielordner "output" haben folgende Namen:
ABC.png
ABD.png
ACD.png
BCD.png
(usw. in allen Kombinationen)
Mit dem Skript, das ich bisher zusammengeschrieben habe, funktioniert das auch FAST wie gewünscht, allerdings habe ich folgendes Problem: Wenn ich z.B. das Bild ABC.png haben möchte, würde ich gerne die Buchstaben in einer beliebigen Reihenfolge eingeben können. D.h. ich will dass mir das Bild ABC.png angezeigt wird aber das soll sowohl mit der Eingabe von A-B-C als auch mit B-C-A als auch mit C-B-A funktionieren. Der einzige Workaround der mir aktuell einfällt ist das Bild ABC.png in meinem Ordner zu kopieren und nochmals als CBA.png usw. abzuspeichern. Für eine simple Anwendung wäre dies noch möglich aber mein Endziel ist eine Anwendung mit sehr viel mehr Buttons und Bildern, so dass dieser Workaround exponentiell mehr Arbeit machen würde. Zudem ist es auch nicht sonderlich elegant.
Schaut euch hier das Skript an:
[CODE lang="java" title="Skript"] <script>
$(document).ready(function() {
/**
* Select the buttons.
* The $display and $clickedButtons are just to output
* the values that are stored.
*/
const $buttons = $('.button');
const $display = $('#display');
const $clickedButtons = $('#clicked-buttons');
const $reset = $('#reset');
$reset.on('click', function() {
values = [];
$clickedButtons.text(values);
});
/**
* Array which tracks your clicked buttons.
* If a button is clicked, the value of that button
* should be added to this array. The combination
* of the values will then later represent the key.
*/
var values = [];
/**
* Listen for the click event on all the buttons.
* When clicked, get the value of that clicked button
* and add that to the values array.
* After that the clicked button values will be combined
* to form a single key and check if that key matches
* a combination. If there is a match the content should
* be anything other than undefined.
*/
$buttons.on('click', function() {
// This is the currently clicked button.
const $button = $(this);
// Get the value of the button.
const value = $button.val();
// If there already are 15 previously clicked buttons,
// then empty the array, so we can start a new combination.
if (values.length === 15) {
values = [];
}
// Now add the newly clicked value.
values.push(value);
// This will output the current values in the array.
$clickedButtons.text(values);
// Transform the array into a single string.
// This will be the key to select content.
// ["1", "2", "3"] becomes "123".
const key = values.join('');
// Check if key has a match in the combinations object.
$display.attr('src', 'output/' + key + '.png');
});
});
</script>[/CODE]
Gibt es eine Möglichkeit diese Funktionalität zu implementieren, die ich oben beschreibe?
Vielen Dank für eure Hilfe bereits im Voraus!
ich bin Java/HTML/CSS Anfänger und will für ein privates Projekt eine simple Website bauen. Wie die Website strukturell aussehen soll, habe ich in diesem Bild zusammengefasst (Bild1 im Anhang):
Zur Erklärung: Oben sind vier Buttons zu sehen, denen ein Wert zugeordnet ist. Darunter ist eine Eingabemaske, in der die geklickten Buttons in der geklickten Reihenfolge eingetragen werden, also eine Art "Button-Click-Logbuch".
Im Feld darunter bzw. in der freien Fläche soll der eingegebene Code ein Bild ausspucken. Die Bilder in meinem Zielordner "output" haben folgende Namen:
ABC.png
ABD.png
ACD.png
BCD.png
(usw. in allen Kombinationen)
Mit dem Skript, das ich bisher zusammengeschrieben habe, funktioniert das auch FAST wie gewünscht, allerdings habe ich folgendes Problem: Wenn ich z.B. das Bild ABC.png haben möchte, würde ich gerne die Buchstaben in einer beliebigen Reihenfolge eingeben können. D.h. ich will dass mir das Bild ABC.png angezeigt wird aber das soll sowohl mit der Eingabe von A-B-C als auch mit B-C-A als auch mit C-B-A funktionieren. Der einzige Workaround der mir aktuell einfällt ist das Bild ABC.png in meinem Ordner zu kopieren und nochmals als CBA.png usw. abzuspeichern. Für eine simple Anwendung wäre dies noch möglich aber mein Endziel ist eine Anwendung mit sehr viel mehr Buttons und Bildern, so dass dieser Workaround exponentiell mehr Arbeit machen würde. Zudem ist es auch nicht sonderlich elegant.
Schaut euch hier das Skript an:
[CODE lang="java" title="Skript"] <script>
$(document).ready(function() {
/**
* Select the buttons.
* The $display and $clickedButtons are just to output
* the values that are stored.
*/
const $buttons = $('.button');
const $display = $('#display');
const $clickedButtons = $('#clicked-buttons');
const $reset = $('#reset');
$reset.on('click', function() {
values = [];
$clickedButtons.text(values);
});
/**
* Array which tracks your clicked buttons.
* If a button is clicked, the value of that button
* should be added to this array. The combination
* of the values will then later represent the key.
*/
var values = [];
/**
* Listen for the click event on all the buttons.
* When clicked, get the value of that clicked button
* and add that to the values array.
* After that the clicked button values will be combined
* to form a single key and check if that key matches
* a combination. If there is a match the content should
* be anything other than undefined.
*/
$buttons.on('click', function() {
// This is the currently clicked button.
const $button = $(this);
// Get the value of the button.
const value = $button.val();
// If there already are 15 previously clicked buttons,
// then empty the array, so we can start a new combination.
if (values.length === 15) {
values = [];
}
// Now add the newly clicked value.
values.push(value);
// This will output the current values in the array.
$clickedButtons.text(values);
// Transform the array into a single string.
// This will be the key to select content.
// ["1", "2", "3"] becomes "123".
const key = values.join('');
// Check if key has a match in the combinations object.
$display.attr('src', 'output/' + key + '.png');
});
});
</script>[/CODE]
Gibt es eine Möglichkeit diese Funktionalität zu implementieren, die ich oben beschreibe?
Vielen Dank für eure Hilfe bereits im Voraus!
. Mir war das nicht bewusst als ich den Post erstellt habe, sonst hätte ich das Problem noch präziser beschreiben können! 
