Array abarbeiten

Onkel · 01.10.2023

Moin,
hab praktisch keine oder nur ganz wenig Ahnung (von allem^^). Vllt. lässt sich mein Problem ja sehr einfach lösen.
Beschäftige mich gerade mit diesem Skript: github PUNKT com/reinhardliess/quote-generator
Das Programm zeigt verschiedene Zitate nach Klick oder nach ein paar Sekunden an. Implementiert ist, dass ein neu angezeigtes Zitat nicht das gleiche ist wie das vorhergehende.
Problem: Es werden leider häufig bereits eingeblendet gewesene Zitate angezeigt. Mein Wunsch wäre, dass erst alle Objekte des Arrays angezeigt werden sollen, bevor es zu Wiederholungen kommt. Hier ist der Codeschnipsel, den ich gern ersetzen würde.

Javascript:

// get a random quote object from a quotes object array

function getRandomQuote(array) {
 
  var intRandom;
 
// prevent last quote from showing again

  do {
    intRandom = getRandomInt(0, array.length - 1);
  } while (intRandom === lastQuote);
  lastQuote = intRandom;
  return array[intRandom];
}

Sempervivum · 01.10.2023

Das ist ein Problem, das man häufig hat und die Lösung ist einfach: Mische das Array am Anfang, eine Funktion dafür findest Du hier:
https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array
Dann die Elemente einfach der Reihe nach ausgeben:
Gleich nach der Definition einfügen:

Code:

// Object array of quotes
var quotes = [
  {
    quote: 'The strength of JavaScript is that you can do anything. The weakness is that you will.',
    source: 'Reg Braithwaite',
    category: 'Technology'
  },

// hier gekürzt

  {
    quote: 'Music was my refuge. I could crawl into the space between the notes and curl my back to loneliness.',
    source: 'Maya Angelou'
  }
 
];

// Shuffle quotes
shuffle(quotes);

// for active timer to change display of quote
var timerId;
var lastQuote = -1;

// Change quote after delay
setQuoteTimer();

// usw. wie vorhanden

Die Funktion getRandomQuote musst Du dann so vereinfachen:

Code:

var quoteIndex = 0;
function getRandomQuote(array) {
  return array[quoteIndex++];
}

(alles ungetestet)

Onkel · 02.10.2023

@Sempervivum

Vielen Dank, schaffe ich leider erst heute Abend zu probieren...

Onkel · 02.10.2023

@Sempervivum

Schade. Leider bin ich im Blindflug unterwegs (JS-Syntax) und weiß auch nicht, wie ich den Code sinnvoll testen kann. Habe es bei webtoolkitonline PUNKT com/javascript-tester.html versucht, aber der schmeißt nur invalid javascript aus. Mein hilfloser Versuch:

Javascript:

function shuffle(quotes) {

    let counter = quotes.length;


    // While there are elements in the quotes

    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 = quotes[counter];

        quotes[counter] = quotes[index];

        quotes[index] = temp;

    }


    return quotes;

// Object array of quotes
var quotes = [
  {
    quote: 'Zitat 1',
    source: 'Autor1',
    category: 'Technology'
  },
  {
    quote: 'Zitat 2',
    source: 'Anonymous'
  },
  {
    quote: 'Zitat 3',
    source: 'Autor 2'
  },
  {
    quote: 'Zitat 4',
    source: 'Anonymous',
    category: 'inspirational'
  },
 
];

// Shuffle quotes
shuffle(quotes);


// for active timer to change display of quote
var timerId;
var lastQuote = -1;

// Change quote after delay
setQuoteTimer();

// Display new quote after 10 seconds
function setQuoteTimer() {
  timerId = setTimeout(printQuote, 10000);
}

// get random integer between 2 integers, inclusive for both
function getRandomInt(fromNumber, toNumber) {
 
  fromNumber = Math.ceil(fromNumber);
  toNumber = Math.floor(toNumber);
 
  return Math.floor( Math.random() * (toNumber - fromNumber + 1) ) + fromNumber;
}

/* generates random color in CSS HSL format using a given saturation and lightness
  saturation: numeric, 0-100
  lightness:  numeric, 0-100
  returns:    string, color in CSS HSL format
*/
function getRandomColorHSL(saturation, lightness) {
 
  return 'hsl(' + getRandomInt(0, 255) + ', ' + saturation + '%, ' + lightness + '%)';
 
}

// get a random quote object from a quotes object array
function getRandomQuote(array) {
 
// get a random quote object from a quotes object array
function getRandomQuote(array) {
  
  var quoteIndex = 0;
function getRandomQuote(array) {
  return array[quoteIndex++];
}

// formats quote, prints it to 'quote-box' div with randomized bg color
function printQuote() {
 
  var newColor, html, oQuote;
 
  // If a quote timer is active, clear it
  if (timerId) {
    clearTimeout(timerId);
  }
 
  // randomize background color, use lightness & saturation from original bg color #36b55c HSL: 138,54,46
  newColor = getRandomColorHSL(54, 46);
  document.body.style.backgroundColor = newColor;
  document.getElementById('loadQuote').style.backgroundColor = newColor;

  // concatenate html to display quote
  oQuote = getRandomQuote(quotes);
  html = '<p class="quote">' + oQuote.quote + '</p><p class="source">' + oQuote.source;
  if (oQuote.citation) {
    html += '<span class="citation">' + oQuote.citation + '</span>';
  }
  if (oQuote.year) {
    html += '<span class="year">' + oQuote.year + '</span>';
  }
  if (oQuote.category) {
    html += '<span class="category">' + oQuote.category + '</span>';
  }
 
  document.getElementById('quote-box').innerHTML = html;
 
  // start timer to change quote
  setQuoteTimer();
}

document.getElementById('loadQuote').addEventListener("click", printQuote, false);

Sempervivum · 02.10.2023

Leider bin ich im Blindflug unterwegs (JS-Syntax)

Dem kann abgeholfen werden: Mittelfristig in dem Du einen Editor verwendest, der den Code automatisch einrückt und auf Syntaxfehler prüft. Visual Studio Code ist da sehr zu empfehlen.
Kurzfristig kannst Du den Code aber auch online formatieren und validieren lassen, z. B. hier:
https://beautifytools.com/javascript-validator.php
Dann siehst Du sofort, dass für die Funktion shuffle die schließende geschweifte Klammer fehlt:

Code:

        function shuffle(quotes) {

            let counter = quotes.length;


            // While there are elements in the quotes

            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 = quotes[counter];

                quotes[counter] = quotes[index];

                quotes[index] = temp;

            }


            return quotes;

        } // diese Klammer fehlte

        // Object array of quotes
        var quotes = [

Und eine weitere Maßnahme, damit Du nicht im Dunkeln tappst: Mach dich mit den Entwicklerwerkzeugen deines Browsers und speziell mit der Console vertraut, dort findest Du u. a. Fehlermeldungen:
https://wiki.selfhtml.org/wiki/Grundlagen/Webprojekte/testen#Arbeiten_mit_dem_Seiteninspektor

Onkel · 02.10.2023

Entwicklungshilfe

. Aber funktioniert leider trotzdem nicht.

Sempervivum · 02.10.2023

Hast Du das mit dem Online-Validator überhaupt probiert? An den Einrückungen erkennt man einen weiteren Fehler:

Code:

// get a random quote object from a quotes object array
/* Der Code von hier:
function getRandomQuote(array) {

    // get a random quote object from a quotes object array
    function getRandomQuote(array) {
... bis hier wiederholt sich und ist überflüssig */
        var quoteIndex = 0;

        function getRandomQuote(array) {
            return array[quoteIndex++];
        }

        // formats quote, prints it to 'quote-box' div with randomized bg color
        function printQuote() {

Onkel · 02.10.2023

Hatte ich nicht, dachte das war es. Aber ich versuche es jetzt mal.
Hab aber Visual Studio installiert und den Code da reingeladen.

Onkel · 02.10.2023

Mhh. eine Klammer zuviel, Und dann "Unrecoverable syntax error." in der letzten Zeile. Was tun?

Sempervivum · 02.10.2023

"Unrecoverable syntax error." - das ist natürlich ein wenig schwierig zu interpretieren.
Poste bitte deinen letzten formatierten Code.

Onkel · 02.10.2023

Javascript:

function shuffle(quotes) {
  let counter = quotes.length;

  // While there are elements in the quotes
  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 = quotes[counter];
    quotes[counter] = quotes[index];
    quotes[index] = temp;
  }

  return quotes;
} // diese Klammer fehlte
// Object array of quotes
var quotes = [{
    quote: 'Zitat 1',
    source: 'Autor1',
    category: 'Technology'
  }, {
    quote: 'Zitat 2',
    source: 'Anonymous'
  }, {
    quote: 'Zitat 3',
    source: 'Autor 2'
  }, {
    quote: 'Zitat 4',
    source: 'Anonymous',
    category: 'inspirational'
  },
];
// Shuffle quotes
shuffle(quotes);

// for active timer to change display of quote
var timerId;
var lastQuote = -1;
// Change quote after delay
setQuoteTimer();
// Display new quote after 10 seconds
function setQuoteTimer() {
  timerId = setTimeout(printQuote, 10000);
}
// get random integer between 2 integers, inclusive for both
function getRandomInt(fromNumber, toNumber) {
  fromNumber = Math.ceil(fromNumber);
  toNumber = Math.floor(toNumber);
  return Math.floor(Math.random() * (toNumber - fromNumber + 1)) + fromNumber;
}
/* generates random color in CSS HSL format using a given saturation and lightness
  saturation: numeric, 0-100
  lightness:  numeric, 0-100
  returns:    string, color in CSS HSL format
*/
function getRandomColorHSL(saturation, lightness) {
  return 'hsl(' + getRandomInt(0, 255) + ', ' + saturation + '%, ' + lightness + '%)';

  // get a random quote object from a quotes object array
  function getRandomQuote(array) {
    // get a random quote object from a quotes object array
    function getRandomQuote(array) {
      var quoteIndex = 0;
      function getRandomQuote(array) {
        return array[quoteIndex++];
      }
      // formats quote, prints it to 'quote-box' div with randomized bg color
      function printQuote() {
        var newColor, html, oQuote;
        // If a quote timer is active, clear it
        if (timerId) {
          clearTimeout(timerId);
        }
        // randomize background color, use lightness & saturation from original bg color #36b55c HSL: 138,54,46
        newColor = getRandomColorHSL(54, 46);
        document.body.style.backgroundColor = newColor;
        document.getElementById('loadQuote').style.backgroundColor = newColor;
        // concatenate html to display quote
        oQuote = getRandomQuote(quotes);
        html = '<p class="quote">' + oQuote.quote + '</p><p class="source">' + oQuote.source;
        if (oQuote.citation) {
          html += '<span class="citation">' + oQuote.citation + '</span>';
        }
        if (oQuote.year) {
          html += '<span class="year">' + oQuote.year + '</span>';
        }
        if (oQuote.category) {
          html += '<span class="category">' + oQuote.category + '</span>';
        }
        document.getElementById('quote-box').innerHTML = html;
        // start timer to change quote
        setQuoteTimer();
      }

      /***
        When the "Show another quote" button is clicked, the event listener
        below will be triggered, and it will call, or "invoke", the `printQuote`
        function. So do not make any changes to the line of code below this
        comment.
      ***/
      document.getElementById('loadQuote').addEventListener("click", printQuote, false);

Sempervivum · 02.10.2023

Hast Du mein Posting #7 gelesen, auch die Kommentare im Code? Die überflüssigen Zeilen sind immer noch drin. Und die schließende Klammer für getRandomColorHSL nicht vergessen:

Code:

        function getRandomColorHSL(saturation, lightness) {
            return 'hsl(' + getRandomInt(0, 255) + ', ' + saturation + '%, ' + lightness + '%)';
        }

        function getRandomQuote(array) {
            return array[quoteIndex++];
        }
        // formats quote, prints it to 'quote-box' div with randomized bg color
        function printQuote() {
            var newColor, html, oQuote;

Dann fehlte noch die Variable quoteIndex:

Code:

        // index of current quote
        // var lastQuote = -1;
        var quoteIndex = -1;

und in der Funktion getRandomQuote müssen wir noch den Überlauf berücksichtigen:

Code:

        function getRandomQuote(array) {
            quoteIndex++;
            if (quoteIndex == quotes.length) quoteIndex = 0;
            return array[quoteIndex];
        }

Nachdem ich das alles eingearbeitet habe, funktioniert es bei mir.

Onkel · 02.10.2023

Offensichtlich habe ich nicht gründlich genug gelesen. Ich schau jetzt nochmal.

Onkel · 02.10.2023

@Sempervivum

So, läuft. Vielen Dank nochmal für die Unterstützung!