Auf website mit JavaScript kreierte Kästchen gezielt ankreuzen.

[gubbe]

Ich bin nicht sicher, ob ich es richtig verstehe, aber ich versuche mal weitere Erklärungen:

document ist nur im Browser deklariert. Der Code muss also immer von Delphi aus mit browser.ExecuteScript aufgerufen werden.

Das Skript ist nur ein String, den Du in Delphi zusammenbauen kannst. Du könntest Dir also zunächst in Delphi das Array bauen mit den Werten, die Du setzen willst.
Dann kannst Du das nochmal durchgehen und den Code zum Ankreuzen im Browser daraus generieren.

Das Ergebnis könnte dann so ähnlich aussehen:

Code:

let kaestchen = [2,5,8,11];

function ankreuzen(kaestchen, tippfeld) {
  for (const element of kaestchen) {
    document.querySelector('div#tip-field-' + tippfeld + ' div.box[data-value="' + element + '"]').classList.add('checked');
  }
}

ankreuzen(kaestchen, 1);

Diese Javascript-Code rufst dann mit browser.ExecuteScript auf.

[Rued]

Ich kann mich nur nochmals bedanken für Deine Unterstützung. Leider ist mir das Zusammenspiel von Delph-Code und JavaScript ein Rätsel.

Zunächst habe ich keine Ahnung, wie ich mehrzeiligen JavaScript-Code mit browser.ExecuteScript aufrufe.
Dann ist mir unklar, wie ich Variablen im JavaScript-Code per Delphi-Code ändere.

Daher noch einmal meine Frage nach einem Tutorial oder ähnlichem Erklärwerk.

[gubbe]

Diese Fragen haben aber nichts mehr speziell mit den Themen Browser und JavaScript zu tun. Jetzt geht es eher um Strings in Delphi.

Ab Delphi 12 kannst Du einen Multiline-String direkt im Code schreiben.

Delphi-Quellcode:

code := '''
Zeile1
Zeile2
Zeile3
'''

Dann übergibst Du einfach "code" an Executescript. Alternativ lädst Du den Code aus einer Datei (mit TFile.ReadAllText) oder baust ihn zur Not in älteren Delphi-Versionen klassisch zusammen

Delphi-Quellcode:

code := 'Zeile1'#13#10 + 
'Zeile2'#13#10 + 
'Zeile3'#13#10;

Wobei #13#10 ein CR/LF also ein Zeilenumbruch unter Windows ist.

Wenn Du Werte an Javascript übergeben willst, baust Du sie einfach in den String ein.

Angenommen, Du hast ein Delphi-Array mit den Kästchen. Dann setzt Du im Javascript einen Platzhalter und ersetzt diesen durch Deine Werte.

Delphi-Quellcode:

var
  Kaestchen: array of string;
  Code: string;
begin
  // Dein Delphi-Array
  Kaestchen := ['2', '5', '8', '11', '14'];
  // Der Javascript-Code mit Platzhalter
  Code := 'let kaestchen = [%kaestchen%];';
  // Platzhalter ersetzen durch die Werte aus dem Delphi-Array  
  Code := Code.Replace('%kaestchen%', String.Join(',', kaestchen));
  // Ergibt dann 'let kaestchen = [2,5,8,11,14];'; und kann an Executescript übergeben werden, um im Browser die Variable zu setzen
end;

Wie Du das genau machst, bleibt Dir überlassen. Die Idee ist einfach, den Javascript-Code in Delphi zusammenzubauen und mit ExecuteScript aufzurufen.

[Rued]

Beim Multiline-String erhalte ich Fehlermeldungen. Der Code "s:=..." beginnt in Zeile 160

Code:

var
s:string;
begin
s:= 'let kaestchen = [2,5,8,11];'+#13#10 +
'function ankreuzen(kaestchen, tippfeld) {' +#13#10 +
  'for (const element of kaestchen) {' +#13#10 +
    'document.querySelector('div#tip-field-' + tippfeld + ' div.box[data-value="' + element + '"]').classList.add('checked');' +#13#10 +
  '}' +#13#10 +
'}' +#13#10 +
'ankreuzen(kaestchen, 1);';

browser1.executeScript(s);

Die Fehlermeldungen:
[dcc32 Fehler] order.pas(163): E2026 Konstantenausdruck erwartet
[dcc32 Fehler] order.pas(163): E2029 Ausdruck erwartet, aber '.' gefunden
[dcc32 Fehler] order.pas(163): E2038 Ungültiges Zeichen in Eingabedatei: '"' (#$22)
[dcc32 Fehler] order.pas(163): E2038 Ungültiges Zeichen in Eingabedatei: '"' (#$22)
[dcc32 Fehler] order.pas(163): E2015 Operator ist auf diesen Operandentyp nicht anwendbar
[dcc32 Fehler] order.pas(166): E2014 Anweisung erforderlich, aber Ausdruck vom Typ 'string' gefunden

[DeddyH]

Du musst auch die einfachen Hochkommata im Javascript im Delphi-String verdoppeln. Ungetestet:

Delphi-Quellcode:

var
s:string;
begin
s:= 'let kaestchen = [2,5,8,11];'+#13#10 +
'function ankreuzen(kaestchen, tippfeld) {' +#13#10 +
  'for (const element of kaestchen) {' +#13#10 +
    'document.querySelector(''div#tip-field-'' + tippfeld + '' div.box[data-value="'' + element + ''"]'').classList.add(''checked'');' +#13#10 +
  '}' +#13#10 +
'}' +#13#10 +
'ankreuzen(kaestchen, 1);';

[Rued]

gubbe, DeddyH jetzt klappt es, so dass ich weitertüfteln kann, wenn es mal wieder regnet. Im Moment feinstes Wetter in La Herradura.

[himitsu]

Zitat von Rued:

Beim Multiline-String

DAS ist kein MultiLine-String.
Das sind mehrere aneinandergehänge, auf mehrere Zeilen verteilte, einzelne String-Konstanten.

Dieses ''' ist ein MultiLineString.

Code:

var
  s: string;
begin
  {$TEXTBLOCK LF JavaScript}  // damit vielleicht in 20 Jahren das ''' weiß, dass wie es den/die nachfolgenden Text(e) highlighten darf
  s := '''
    let kaestchen = [2,5,8,11];
    function ankreuzen(kaestchen, tippfeld) {
      for (const element of kaestchen) {
        document.querySelector('div#tip-field-' + tippfeld + ' div.box[data-value="' + element + '"]').classList.add('checked');
      }
    }
    ankreuzen(kaestchen, 1);
  ''';

(auch wenn der Highlighter in unserem Forum damit noch nichts anfangen kann)