Python-Code und HTML

MatheMagie · Sonntag 1. Oktober 2023, 00:36

Hallo zusammen,

ich spiele gerade damit herum ein Chat Interface in HTML zu erzeugen.
Das klappt soweit auch ganz gut und ich habe in meinem 'Main' ein <p> Element.

Code: Alles auswählen

<section class="main">
    <p id="output"></p>
</section>

Nun soll dieses ueber ein Python-Script immer anders befuellt werden. In meiner HTML Datei steht als folgendes:

Code: Alles auswählen

<py-script src="Hello.py"></py-script>

Jetzt moechte ich in meinem Python Script zunaechst das HTML Element mit der id = 'output' finden
und anschliessend den Beispieltext 'hello wold' zurueckgeben.

Code: Alles auswählen

html_filepath = 'start.html'
html_content = open(html_filepath, 'r')

# parse the HTML content w/ BeautifulSoup
sp = BeautifulSoup(html_content, 'html.parser')

# ind the "output" element
# output_element = sp.find(id='output')
output_element.string = 'test'

Das klappt auch soweit nur wie bekomme ich das jetzt wieder zuruck in meine HTML Datei?

Oder bin ich hier ganz auf dem Holzweg?

Kurzer Hinweis:
Die Idee soll spater sein, dass der User im Webinterface 2 Zahlen eingeben kann, in Python soll dann die Summe ausgerechnet werden und im "Output" wieder angezeigt werden.

Liebe Gruesse

sparrow · Sonntag 1. Oktober 2023, 05:24

Webinterface?
HTML?
Python Datei als src?

Klingt als würdest du versuchen lokal einfach HTML Dateien zu speichern und denkst, der Browser würde da etwas ausführen.
Nö.
Wenn das dein Gedanke ist, musst du auf JavaScript zurückgreifen.

__blackjack__ · Sonntag 1. Oktober 2023, 18:32

So ganz ohne Python und ohne dass da etwas an den Server zum berechnen geschickt werden müsste.

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
  <head><title>Addieren</title></head>
  <section>
    <input type="number" name="a" value="0">
    + <input type="number" name="b" value="0">
    = <output id="output">0</output>
    <button id="calculate_button">Berechnen</button>
  </section>
  
  <script type="text/javascript">
    let aInput = document.getElementsByName('a')[0];
    let bInput = document.getElementsByName('b')[0];
    let output = document.getElementById('output');
    document.getElementById('calculate_button').addEventListener(
      'click', () => output.value = aInput.valueAsNumber + bInput.valueAsNumber
    );
  </script>
</html>