Sclero2004
Mitglied
Das ist jetzt doppelt: Wenn Du den Aufruf inline im HTML notierst, ist das addEventListener überflüssig, lösche es heraus.
Naja, nicht eingerückt ist ein immer noch besser als alles am Stück.Ich denke schon, denn ein paar \n einzufügen ist ja kein Problem, einmal Compilieren und Linken auch nicht. So hat man zumindest halbwegs lesbaren HTML-Code.
Aufwändiger wird es nur, wenn man auch noch Tidy-HTML einsetzen will, dann muss man eine zusätzliche Library erzeugen, aber auch das sollte für einen erfahrenen Programmierer kein unlösbares Problem darstellen.
nameCell = row.querySelector('.td-filename');
function Copy(event) {
Das teste ich gerade....Viel einfacher wäre es, auf das onclick im HTML zu verzichten und direkt meinen Code aus #7 zu verwenden. Dann musst Du nur den Zellen mit dem Namen die Klasse verpassen.
<script>
td-filename {
[Code aus #7]
};
</script>
<script>
// Wir registrieren zunächst einen Eventlistener für "window".
// Dieser feuert wenn irgend wo auf der Seite geklickt wurde.
window.addEventListener('click', event=> {
// event.target ist das Element das geklickt wurde.
// Wir prüfen jetzt ob der Button für das Kopieren
// in die Zwischenablage gedrückt wurde. Das ist der Fall,
// wenn es sich um einen Button in einer Tabelle handelt.
if (event.target.matches('table button')) {
const
// Vom Button ausgehend die Tabellenzeile ermitteln.
// Die Funktion closest sucht aufwärts das erste Element,
// das, in diesem Fall, ein Reihe in der Tabelle ist.
row = event.target.closest('tr'),
// und die Zelle mit dem Dateinamen
// dazu müssen wir dieser jeweils im HTML
// die Klasse "td-filename" geben
nameCell = row.querySelector('.td-filename'),
// Jetzt haben wir die Zelle und können daraus den Text auslesen:
fileName = nameCell.innerHTML;
// Jetzt können wir eine Funktion aufrufen und dieser
// den Namen übergeben.
handleFileName(fileName);
}
});
// Die Funktion, die aufgerufen wird, müssen wir natürlich auch definieren:
function handleFileName(fileName) {
// Jetzt steht der Dateiname als Parameter "fileName" zur Verfügung
// und Du kannst damit arbeiten.
}
</script>
Keine Sorge, bei einem anderen Projekt von mir, Entwicklung einer Android-App, bin ich selber der Anfänger.Das kostet bestimmt Nerven bei mir Anfänger!
Ich nehme mal an, der C++-Code läuft irgend wie auf dem Server, nicht wahr?Da ich von der Zwischenablage abgekommen bin, soll er Filename entweder auf eine weitere Webpage in ein Eingabefeld gesetzt werden oder gleich im C++-Code verarbeitet werden.
function handleFileName(fileName) {
// Jetzt steht der Dateiname als Parameter "fileName" zur Verfügung
// und Du kannst damit arbeiten.
location.href = 'die-andere-Seite.html?name=' + fileName);
}
Eine ID braucht mein Code nicht. Der Button wird über event.target identifiziert. Javascript "weiß" ja, welcher Button gedrückt wurde und übergibt ihn automatisch an den Eventhandler.Den Buttons vergebe ich immer noch eine eindeutige ID. An welcher Stelle frage ich diese ab, bzw. welcher Button gedrückt wurde (button.Name...)?
Ich nehme mal an, der C++-Code läuft irgend wie auf dem Server, nicht wahr?
Mit dem Javascript befindest Du dich jedoch auf dem Client bzw. im Browser und hast nicht ohne weiteres Zugriff auf das was auf dem Server läuft. Das einfachste wäre, eine weitere Seite aufzurufen mit dem Dateinamen als GET-Parameter...
Ja, aber in welcher Form? Es sind ja 4 (max) Buttons in einer Tabellenzeile.Eine ID braucht mein Code nicht. Der Button wird über event.target identifiziert. Javascript "weiß" ja, welcher Button gedrückt wurde und übergibt ihn automatisch an den Eventhandler.
OK, da hatte ich jetzt nicht genau aufgepasst, es ist also nicht nur 1 Button sondern mehrere. In dem Fall brauchst Du natürlich einen Identifier in Form einer Klasse. Die wäre in allen Tabellenzeilen gleich und Du kannst sie im Javascript so abfragen:Es sind ja 4 (max) Buttons in einer Tabellenzeile.
<script>
// Wir registrieren zunächst einen Eventlistener für "window".
// Dieser feuert wenn irgend wo auf der Seite geklickt wurde.
window.addEventListener('click', event => {
// event.target ist das Element das geklickt wurde.
// Wir prüfen jetzt ob der Button für das Kopieren
// in die Zwischenablage gedrückt wurde. Das ist der Fall,
// wenn es sich um einen Button in einer Tabelle handelt.
if (event.target.matches('table button')) {
const
// Vom Button ausgehend die Tabellenzeile ermitteln.
// Die Funktion closest sucht aufwärts das erste Element,
// das, in diesem Fall, ein Reihe in der Tabelle ist.
row = event.target.closest('tr'),
// und die Zelle mit dem Dateinamen
// dazu müssen wir dieser jeweils im HTML
// die Klasse "td-filename" geben
nameCell = row.querySelector('.td-filename'),
// Jetzt haben wir die Zelle und können daraus den Text auslesen:
fileName = nameCell.innerHTML;
// Jetzt können wir eine Funktion aufrufen und dieser
// den Namen übergeben.
handleFileName(event.target, fileName);
}
});
// Die Funktion, die aufgerufen wird, müssen wir natürlich auch definieren:
function handleFileName(btn, fileName) {
// Jetzt steht der Dateiname als Parameter "fileName" zur Verfügung
// und Du kannst damit arbeiten.
console.log(fileName);
// Hat der Button die Klasse "add"?
if (btn.classList.contains('add')) {
console.log('Add-Button wurde gedrückt');
}
// Hat der Button die Klasse "delete"?
if (btn.classList.contains('delete')) {
console.log('Delete-Button wurde gedrückt');
}
}
</script>
Da treffen jetzt zwei verschiedene Welten aufeinander: Die des Microcontrollers und die der Webentwicklung. Aus Sicht der Webentwicklung ist das, wo die HTML-Seiten liegen, egal ob statisch oder dynamisch durch C++ erzeugt, der Server. Und der Browser auf dem PC (oder auch Tablet oder Handy), wo auch das Javascript läuft, der Client.Also der Microcontroller irgendwo in LAN hat eine SD-Karte. Er wird von darauf befindlichen Webseiten von meinem PC-Browser her (zB.) gesteuert und eingestellt.
...
Daher werden die Directory- Seite, eine zum Download. eine Upload-Seite usw. nicht von der SD-Karte geladen, sondern codemäßig jedesmal erstellt
meinst Du eine C++-Funktion, nicht wahr?Zur Weiterverarbeitung müßte der Filename (statt in die Zwischenablage zu kommen) dann als Variabe in einer Funktion verwendet werden.
nein, Javascript, als Beispiel:... und ich vermute jetzt, mit der Funktion hier:
meinst Du eine C++-Funktion, nicht wahr?
<script>
function sendRes(res) {
var xRes = new XMLHttpRequest();
xRes.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("sendMCreset").innerHTML =
this.responseText;
}
};
xRes.open("GET", "setReset?sendMCreset="+res, true);
xRes.send();
}
</script>
Verstehe, dann müsste die Funktion in etwa so aussehen, mit fetch ist es wesentlich einfacher:nein, Javascript, als Beispiel:meinst Du eine C++-Funktion, nicht wahr?
function handleFileName(btn, fileName) {
// Jetzt steht der Dateiname als Parameter "fileName" zur Verfügung
// und Du kannst damit arbeiten.
console.log(fileName);
// Hat der Button die Klasse "add"?
if (btn.classList.contains('add')) {
console.log('Add-Button wurde gedrückt');
fetch('handleFileAction?name="+ fileName + '&action=add';)
.then(response => { response.text() })
.then(text => {
document.getElementById("feedback-from-fetch").innerHTML = text;
});
}
// Hat der Button die Klasse "delete"?
if (btn.classList.contains('delete')) {
console.log('Delete-Button wurde gedrückt');
}
}
function handleFileName(btn, fileName) {
var xText;
if (btn.classList.contains('dir')) {xText = 'Directory';
}
if (btn.classList.contains('do')) {xText = 'Download';
}
if (btn.classList.contains('de')) {xText = 'Delete';
}
if (btn.classList.contains('re')) {xText = 'Rename';
}
if (btn.classList.contains('so')) {xText = 'Sonstiges';
}
var xText = xText + ',' + fileName;
xText.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200) {
<!--1 document.getElementById("RelaisState").innerHTML =-->
<!--1 this.responseText;-->
<!--2 document.getElement(xText) = this.responseText;<!--
<!--3 element.innerHTML = xText;-->
}
};
xText.open('GET','setCommand?xText',true);
xText.send();
}
var xRes = new XMLHttpRequest();
Leider weiß ich nicht wie die Serverseite die URL auswertet, die Du in open übergibst. Programmierst Du das selber? Normaler Weise macht man das so wie in meinem Code mit fetch.
xText.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200) {
element.innerHTML = xText;
}
};
xText.open('GET','setCommand?xTest',true);
xText.send();
server.on("/setCommand", handle_SD);
Ja, ich hatte eine Klasse verwendet weil ich dachte, das sei am Anfang am einfachsten. Du kannst auch ein data-Attribute nehmen:Ich muß aber in Deinem Code #34 die Abfrage [if (btn.classList.contains('...] genauso für jede Buttonklasse wiederholen?
<td><button data-action="dir">ölagh</button></td>
const
action = event.target.dataset.action;
queryString = `${action},${fileName}`;
Ist ok: nur eine Klasse reicht ja um die Beiträge hier möglichst klein zu halten.Ja, ich hatte eine Klasse verwendet weil ich dachte, das sei am Anfang am einfachsten. Du kannst auch ein data-Attribute nehmen:
function handleFileName(btn, fileName) {
// Jetzt steht der Dateiname als Parameter "fileName" zur Verfügung
// und Du kannst damit arbeiten.
console.log(fileName);
// Hat der Button die Klasse "dir"?
if (btn.classList.contains('dir')) {
console.log('Dir-Button wurde gedrückt');
fetch('handleFileAction?name="+ fileName + '&action=dir';)
.then(response => { response.text() })
.then(text => {
document.getElementById("feedback-from-fetch").innerHTML = text;
});
}
// Hat der Button die Klasse "del"?
if (btn.classList.contains('del')) {
console.log('Delete-Button wurde gedrückt');
}
}
Habe ich noch nicht gekannt. Im oberen Code sind aber keine Backticks.Beachte die Backticks. Mit dieser Syntax kann man Variablen in einen String einfügen.
Ja genau, das ist eine .ino-Datei, mit einer zugehörigen Datei css.h. In letzterer stehen als Variablen der HTML-Codes gemeinsam für alle benötigten Webseiten (Kopf- und Fußteil), und im .ino werden die Zeilen fürs Directory oder was gerade erforderlich ist dazwischengetan und alles zusammengesetzt.Noch eine Frage zum Hintergrund: Ich hatte vor etwas längerer Zeit Berührung mit einem Microcontroller-Projekt, da handelte es sich um einen Arduino und der C++-Code steckte in ino-Dateien statt cpp. Ist das bei dir etwas ähnliches?