This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

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:
<!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:
export class Car {

    constructor(CarName, CarAge, CarColor){

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

}
};

Code main.js:
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
Als Lösung markieren 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. 
Als Lösung markieren 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
Als Lösung markieren Zitieren


Gehe zu:


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