AGB  ·  Datenschutz  ·  Impressum  







Anmelden
Nützliche Links
Registrieren
Zurück Delphi-PRAXiS Programmierung allgemein Netzwerke Auf website mit JavaScript kreierte Kästchen gezielt ankreuzen.
Thema durchsuchen
Ansicht
Themen-Optionen

Auf website mit JavaScript kreierte Kästchen gezielt ankreuzen.

Ein Thema von Rued · begonnen am 9. Nov 2024 · letzter Beitrag vom 20. Nov 2024
Antwort Antwort
Seite 2 von 3     12 3      
Benutzerbild von Rued
Rued

Registriert seit: 14. Mai 2008
Ort: Schleching
75 Beiträge
 
Delphi 12 Athens
 
#11

AW: Auf website mit JavaScript kreierte Kästchen gezielt ankreuzen.

  Alt 13. Nov 2024, 11:58
gubbe, Sebastian entschuldigt bitte meine späte Reaktion, aber zum einen bin ich momentan mit dem Wohnmobil in Andalusien unterwegs, zum anderen hatte ich die - vergebliche - Hoffnung, auf offene Fragen anderweitig Antworten zu bekommen, um Euch zu schonen.

Mir ist z. B. unklar, wie ich das Kästchen-Array speichern kann oder wie ich den Befehl document.querySelector('div.box[data-value="2"]') einbaue. Gibt es zu dem Thema ein Tutorial? Ich habe nichts gefunden.
Rüdiger Droste
  Mit Zitat antworten Zitat
QuickAndDirty

Registriert seit: 13. Jan 2004
Ort: Hamm(Westf)
1.944 Beiträge
 
Delphi 12 Athens
 
#12

AW: Auf website mit JavaScript kreierte Kästchen gezielt ankreuzen.

  Alt 13. Nov 2024, 12:14
Ich kenne das nur aus C#...aber die Bibliotheken sind ja beide von Anders Hejlsberg konzipiert.
Du müstest vermutlich eine TWebBrowser Komponente auf dem Form plazieren mit Browser.navigate(url) dahin navigieren und dann wie beschrieben
das dargestellte HTML dokument via screen-scraping auswerten(Browser.document = DOM).
auf Stackoverflow gibt es dieses Beispiel zum Klicken eines Buttons im DOM
Delphi-Quellcode:
//Source
//https://stackoverflow.com/questions/47126729/delphi-webbrowser-document-check-existence-of-element-by-id
uses
  MSHTML;

procedure TForm1.WebBrowser1DocumentComplete(ASender: TObject; const pDisp: IDispatch; const URL: OleVariant);
var
  Element: IHTMLElement;
begin
  if pDisp = TWebBrowser(ASender).ControlInterface then
  begin
    Element := (WebBrowser1.Document as IHTMLDocument3).getElementById('linkDtlC0-3');
    if Assigned(Element) then
      Element.click;
  end;
end;

Sh
Andreas
Monads? Wtf are Monads?
  Mit Zitat antworten Zitat
Benutzerbild von gubbe
gubbe

Registriert seit: 8. Okt 2005
Ort: Schleswig-Holstein
137 Beiträge
 
Delphi 11 Alexandria
 
#13

AW: Auf website mit JavaScript kreierte Kästchen gezielt ankreuzen.

  Alt 13. Nov 2024, 17:23
Der Code aus Stackoverflow ist hier zu alt. Da geht es noch um den Internet Explorer. Die Frage bezog sich ja schon auf den Edge-Browser.

Ankreuzen kannst Du z.B. so:
Code:
document.querySelector('div.box[data-value="2"]').classList.add('checked');
Du rufst das in Delphi mit Browser.Executescript auf.
Code:
 browser.executeScript('document.querySelector(''div.box[data-value="2"]'').classList.add(''checked'')');
Zum Ankreuzen mehrerer Kästchen kannst Du den Befehl mehrfach hintereinander schreiben mit Semikolon getrennt und natürlich fortlaufendem Wert für "data-value".
Ich wäre nur nicht sicher, ob das tatsächlich ankreuzt. Es sieht so aus, aber ggf. speichern die den Zustand nochmal separat irgendwo in JavaScript ab, wenn man die Felder anklickt. Das musst Du ausprobieren.

Wenn Du nicht nur setzen, sondern auch abfragen willst, musst Du zusätzlich das Event "OnExceuteScript" des Browsers nutzen. Der Skriptaufruf ist asynchron, d.h. Du führst das Script aus und bekommst die Antwort erst über das Event.
Der Parameter AResultObjectAsJson enthält die Antwort im JSON-Format.

z.B.
Code:
document.querySelector('div.box[data-value="2"]').classList.contains('checked')
würde als Antwort true oder false zurückgeben, je nachdem ob das Kästchen angekreuzt ist.
  Mit Zitat antworten Zitat
Benutzerbild von gubbe
gubbe

Registriert seit: 8. Okt 2005
Ort: Schleswig-Holstein
137 Beiträge
 
Delphi 11 Alexandria
 
#14

AW: Auf website mit JavaScript kreierte Kästchen gezielt ankreuzen.

  Alt 13. Nov 2024, 17:32
Zusatz: Da es mehrere Tipreihen gibt, solltest Du die auch direkt ansprechen..

Die zweite z.B. so:
Code:
document.querySelector('div#tip-field-2 div.box[data-value="2"]').classList.add('checked')
  Mit Zitat antworten Zitat
Benutzerbild von Rued
Rued

Registriert seit: 14. Mai 2008
Ort: Schleching
75 Beiträge
 
Delphi 12 Athens
 
#15

AW: Auf website mit JavaScript kreierte Kästchen gezielt ankreuzen.

  Alt 14. Nov 2024, 15:07
gubbe, ich danke Dir für Deine Mühe.

Mit
Code:
browser.executeScript('document.querySelector(''div.box[data-value="2"]'').classList.add(''checked'')');
kreuze ich für die erste Begegnung die "0" an. Das klappt, somit auch das Ankreuzen von "1" und "2".

Der Code
Code:
document.querySelector('div#tip-field-2 div.box[data-value="2"]').classList.add('checked')
löst den Fehler "Undeklararierter Bezeichner", da ich nicht weiß, wo und wie ich document deklariere.

Zudem würde ich gerne einmal alle Kästchen in ein zweidimensionales Array[1..12,1..39] speichern. Von welchem Typ ist der Speicher, wie identifiziere ich, wie ersetzte ich einen Wert in An- und Abführungszeichen durch eine Variable?

Für mich ist das völliges Neuland und ein Tutorial oder dergleichen habe ich nicht finden können.

Das erste Tippfeld wird mit
Code:
<div id="tip-field-0"
bezeichnet,
die Kästchen eines Tippfeldes werden mit
Code:
<div class="box" data-value="4" data-row="1"></div>
fortlaufend nummeriert.

data-value wird von 1 bis 39 hochgezählt, data-row von 0 bis 12 (s. Anhang mit Code-Ausschnitt).
Miniaturansicht angehängter Grafiken
1.gif  
Rüdiger Droste
  Mit Zitat antworten Zitat
Benutzerbild von gubbe
gubbe

Registriert seit: 8. Okt 2005
Ort: Schleswig-Holstein
137 Beiträge
 
Delphi 11 Alexandria
 
#16

AW: Auf website mit JavaScript kreierte Kästchen gezielt ankreuzen.

  Alt 14. Nov 2024, 19:10
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.
  Mit Zitat antworten Zitat
Benutzerbild von Rued
Rued

Registriert seit: 14. Mai 2008
Ort: Schleching
75 Beiträge
 
Delphi 12 Athens
 
#17

AW: Auf website mit JavaScript kreierte Kästchen gezielt ankreuzen.

  Alt 16. Nov 2024, 12:58
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.
Rüdiger Droste
  Mit Zitat antworten Zitat
Benutzerbild von gubbe
gubbe

Registriert seit: 8. Okt 2005
Ort: Schleswig-Holstein
137 Beiträge
 
Delphi 11 Alexandria
 
#18

AW: Auf website mit JavaScript kreierte Kästchen gezielt ankreuzen.

  Alt 16. Nov 2024, 13:57
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.
  Mit Zitat antworten Zitat
Benutzerbild von Rued
Rued

Registriert seit: 14. Mai 2008
Ort: Schleching
75 Beiträge
 
Delphi 12 Athens
 
#19

AW: Auf website mit JavaScript kreierte Kästchen gezielt ankreuzen.

  Alt 18. Nov 2024, 12:53
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
Rüdiger Droste
  Mit Zitat antworten Zitat
Benutzerbild von DeddyH
DeddyH

Registriert seit: 17. Sep 2006
Ort: Barchfeld
27.625 Beiträge
 
Delphi 12 Athens
 
#20

AW: Auf website mit JavaScript kreierte Kästchen gezielt ankreuzen.

  Alt 18. Nov 2024, 13:10
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);';
Detlef
"Ich habe Angst vor dem Tag, an dem die Technologie unsere menschlichen Interaktionen übertrumpft. Die Welt wird eine Generation von Idioten bekommen." (Albert Einstein)
Dieser Tag ist längst gekommen
  Mit Zitat antworten Zitat
Antwort Antwort
Seite 2 von 3     12 3      


Forumregeln

Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Gehe zu:

Impressum · AGB · Datenschutz · Nach oben
Alle Zeitangaben in WEZ +1. Es ist jetzt 08:05 Uhr.
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024 by Thomas Breitkreuz