Javascript-forum › Entwicklung › Javascript v
JS onclick-Function wird beim Seite laden ausgeführt

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Baumstrukturmodus
JS onclick-Function wird beim Seite laden ausgeführt
IncepTer
Unregistered
 
#1
17.07.2022, 18:24
Hallo Freunde,

ich bin recht neu in Sachen Javascript und will mich eigentlich nur behelfsmäßig für meinen kleinen heimischen Webserver durch-wurschteln. Gerade jedoch bin ich an einem Punkt, wo ich nur maximal verwirrt bin. Vielleicht könnt ihr mir ja mal helfen:

Kurz zur Idee und zum Problem:

Ich möchte auf der Seite einfach auf einen Button drücken, welcher dann per Javascript eine php-Funktion aufruft, welche ein
UPDATE-Befehl in die MySQL Datenbank schiebt und dadurch wird dann an der Webcam ein neues Bild gemacht.

Wenn ich die Seite nun (neu)lade, dann wird der Code ausgeführt und ich sehe, wie "bild_aufnehmen" auf 1 gesetzt wird (es kommt aber keine aleart-Meldung).
Klicke ich nun bewusst auf den Button, kommt der Hinweis: "Es wird ein neues Bild gemacht.", aber der Rest wird irgendwie
nicht mehr ausgeführt. Der php/MySQL Code ist richtig und funktioniert allein auch, nur hier ist irgendwie alles anders...
Ich probiere nun schon seit 2 h und sehe keine Idee mehr.

Danke für eure Hilfe Smile

Die index.php:

PHP-Code:
<?php 

function Bild_Aufnehmen()

{

 echo "Es wird ein neues Bild gemacht.";

 $pdo = new PDO('mysql:host=xxxx;dbname=xxxx', 'xxxx', 'xxxx');

 $stmt2 = $pdo->prepare("UPDATE server_check SET bild_aufnehmen = 1 WHERE 1");

 $result2 = $stmt2->execute();

}

Darin ist im html-Teil:
Code:
<!DOCTYPE html>
<html>
<head>
<script>
function js_Bild_Aufnehmen(){  alert("<?php Bild_Aufnehmen(); ?>");}
</script>
</head>
<body>
<h3>Steuerelemente</h3>
<button type="button" onclick="js_Bild_Aufnehmen();">Bild aufnehmen</button>
</body>
</html
Zitieren
admin Offline
Administrator
*******
Beiträge: 636
Themen: 65
Registriert seit: Feb 2021
Bewertung: 14
#2
17.07.2022, 21:46 (Dieser Beitrag wurde zuletzt bearbeitet: 17.07.2022, 21:52 von admin.)
Eigentlich ist das alles falsch.
Du kannst das so bauen (nicht unbedingt wie du es gemacht hast) , dass nach einen Seiten relod der Code läuft.

Eigentlich sollte man das mit Ajax ,fetch odeer ähnliches machen.

Nur so wie es jetzt ist es nicht gut.
Du solltest 2 Dateien haben .
Einmal mit den PHP Code zb mit Name antwort.php
z. B.
so
Code:
$pdo = new PDO('mysql:host=xxxx;dbname=xxxx', 'xxxx', 'xxxx');
$stmt2 = $pdo->prepare("UPDATE server_check SET bild_aufnehmen = 1 WHERE 1");
$result2 = $stmt2->execute();
echo 1;// wenn ok dann 1  wenn probleme dann was anderes
und dann die HTML Datei die es aufruft
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>Steuerelemente</h3>
<button id="los">Bild aufnehmen</button>
<script>
document.getElementById('los').addEventListener('click',function(){
    fetch('antwort.php')
        .then(res => res.json())
        .then(data => {
               if(data==1){
                   alert('update ok')  
               }else{
                   alert('probleme mit Update')
               }
        });
});
        </script>
      </body>
</html>

so ungefähr sollte es besser sein
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Suchen Bewerten
Zitieren
rzscout Offline
Administrator
*******
Beiträge: 306
Themen: 14
Registriert seit: Jun 2022
Bewertung: 26
#3
18.07.2022, 18:00
(17.07.2022, 18:24)IncepTer schrieb: Hallo Freunde,

ich bin recht neu in Sachen Javascript und will mich eigentlich nur behelfsmäßig für meinen kleinen heimischen Webserver durch-wurschteln. Gerade jedoch bin ich an einem Punkt, wo ich nur maximal verwirrt bin. Vielleicht könnt ihr mir ja mal helfen:

Kurz zur Idee und zum Problem:

Ich möchte auf der Seite einfach auf einen Button drücken, welcher dann per Javascript eine php-Funktion aufruft, welche ein
UPDATE-Befehl in die MySQL Datenbank schiebt und dadurch wird dann an der Webcam ein neues Bild gemacht.

Wenn ich die Seite nun (neu)lade, dann wird der Code ausgeführt und ich sehe, wie "bild_aufnehmen" auf 1 gesetzt wird (es kommt aber keine aleart-Meldung).
Klicke ich nun bewusst auf den Button, kommt der Hinweis: "Es wird ein neues Bild gemacht.", aber der Rest wird irgendwie
nicht mehr ausgeführt. Der php/MySQL Code ist richtig und funktioniert allein auch, nur hier ist irgendwie alles anders...
Ich probiere nun schon seit 2 h und sehe keine Idee mehr.

Danke für eure Hilfe Smile

Die index.php:

PHP-Code:
<?php 

function Bild_Aufnehmen()

{

 echo "Es wird ein neues Bild gemacht.";

 $pdo = new PDO('mysql:host=xxxx;dbname=xxxx', 'xxxx', 'xxxx');

 $stmt2 = $pdo->prepare("UPDATE server_check SET bild_aufnehmen = 1 WHERE 1");

 $result2 = $stmt2->execute();

}

Darin ist im html-Teil:
Code:
<!DOCTYPE html>
<html>
<head>
<script>
function js_Bild_Aufnehmen(){  alert("<?php Bild_Aufnehmen(); ?>");}
</script>
</head>
<body>
<h3>Steuerelemente</h3>
<button type="button" onclick="js_Bild_Aufnehmen();">Bild aufnehmen</button>
</body>
</html

Wie Administrator schon schreibt ist das leider falsch was du geschrieben hast. Du kannst keinen PHP-Code in JavaScript ausführen. Du kannst aber ein XMLHttp-Request ausführen, wo ein PHP-Code ausgeführt wird.

Du solltest deswegen drei oder auch vier Dateien haben. Eine HTML-Datei für das Gerüst, eine JavaScript-Datei(.js), eine CSS-Datei zum Gestalten und eine PHP-Datei(.php) die entweder direkt aufgerufen wird oder durch einen XMLHttp-Request.

Per JavaScript löst du einen event aus bzw. eine Funktion die einen Request beinhaltet zur besagten PHP-Datei als Ergebnis könnte PHP nach dem MySQL-Update eine Rückmeldung geben.

Mein Beispiel:
Code:
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Webcam</title>
    <script>
        'use strict';
        document.addEventListener("DOMContentLoaded", srt);
        function srt() {
            document.getElementById('myButton').addEventListener('click', function() {
                let xhr = new XMLHttpRequest();
                xhr.open('POST', 'meinPHP.php');
                xhr.addEventListener('readystatechange', function() {
                    if(xhr.status==200 && xhr.readyState==4) {
                        if(xhr.responseText=='ok') {
                            alert('Bild wurde aufgenommen');
                        }
                    }
                });
            });
        }
    </script>
</head>
<body>
    <h3>Steuerelemente</h3>
    <button id="myButton"></button>
</body>
</html>


PHP-Code:
<?php

$link = new MySQLI('nix', 'nix', 'nix', 'nixc');

if($stmt = $link->prepare('UPDATE...')) {

    $stmt->execute();

    if($stmt->affected_rows>0) {

        echo 'ok';

        $stmt->close();

        $link->close();

        exit

    }

}

?>
Suchen Bewerten
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste