Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Button "onclick" Fehler
#1
Liebe Community, 

mit großem Interesse verfolge ich einen JS Kurs und bin voller Elan dabei.
Beim Modul mit den Klassen, habe ich nun versucht ein eigenes Beispiel zu bauen.
Leider kann ich die vorhandene Fehlermeldung nicht genau deuten.
Es wäre schön, wenn ihr mal drüber schauen könntet.
Vielen lieben Dank für eure Hilfe.

Mein Übungsziel sollte sein:
  • eine eigene Klasse „Car.js“ erstellen und darin Daten speichern
  • aus einer anderen „main.js“ Datei, sollen dann diese Daten ausgelesen und ausgegeben werden. (hier reicht mir die Ausgabe per Konsole)
 Leider erhalte ich hier in Zeile 35 einen Fehler in der Konsole.

Uncaught ReferenceError: main is not defined at HTMLButtonElement.onclick ([u]index.html:35:33

Code index.html:
Code:
<!DOCTYPE html>
<html lang="en">
<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">
    <script type="module" src="main.js" type="text/javascript"></script>
   
    <style>
        #car_field {
            margin: 10px;
           }
    </style>
    <title>Car-Rechner</title>

</head>
<body>
    <div>
        <div id="car_field">
            <label>Car Name</label><br>
            <input id="CarName" type="text">
         </div>
        <br>
        </div>
        <div id="car_field">
            <label>Car Age</label><br>
            <input id="CarAge " type="number">
        </div>
        <br>
        <div id="car_field">
            <label>Car color</label><br>
            <input id="CarColor" type="text">
        </div>

       <button onclick="main()">Ok</button>



    </div>
</body>
</html>

Code car.js:
Code:
export class Car {

    constructor(CarName, CarAge, CarColor){

        this.CarName = CarName;
        this.CarAge = CarAge;
        this.CarColor = CarColor;

}
};

Code main.js:
Code:
import {Car} from "./car.js"


function main() {   

    var inputCarName = document.getElementById("CarName").value;   

    var inputCarAge = document.getElementById("CarAge").value;

    var inputCarColor = document.getElementById("CarColor").value;

    var car = new Car(inputCarName,inputCarAge,inputCarColor);
    var car2 = new Car(inputCarName,inputCarAge,inputCarColor);




    console.log(car);
    console.log(car2);

    }
Zitieren
#2
Hi Daniel, leider gibt es da ein Problem der nicht direkt mit deinem Code zusammenhängt, sondern an den Sicherheitseinstellungen von deinem Browser und der Cross-Site-Richtlinien. Auf einem lokalen Webserver würde man das zum laufen bringen, wenn man über den Header bestimmte Einstellungen reischreibt. Durch das Öffnen im Browser gibt es aber immer Probleme.

Eine Weitere Lösung wäre z.B. die Einstellungen im Browser zu ändern - hier ein Link für Einstellungen im Firefox:
https://seeseekey.net/archive/126538/

Ich hoffe es hilft dir weiter beim Lernen mit OOP.

Viel Erfolg

rzscout
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren
#3
Klasse, vielen lieben Danke für die schnelle Antwort. Ich hatte den Live Preview Webserver in VS Code installiert, dachte der reicht um das Problem zu umgehen.

Nachtrag: Ich habe die Einstellungen im Browser nicht verändert, dafür aber den Live Preview Webserver in VS Code wieder deinstalliert und siehe da, es klappt. 
Zitieren
#4
Wie gesagt das Problem liegt nicht an deinem Code sondern an den Einstellungen vom Browser.
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren


Gehe zu:


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