If I run my website it doesnt allow me to use my javascript functions.
I get these errors:
Uncaught SyntaxError: Unexpected token 'export' (at firebase-app.js:1577:1)Understand this errorAI
firebase-database.js:1 Uncaught SyntaxError: Cannot use import statement outside a module (at firebase-database.js:1:1)
I use these scripts to get the firebase data
<script src="https://www.gstatic.com/firebasejs/9.1.2/firebase-database.js"></script>
In this case, Can anyone help me?
This is my code. I removed my personal data from the firebaseconfig but the rest is the same.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stageplan Maker</title>
<script src="https://www.gstatic.com/firebasejs/9.1.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.1.2/firebase-database.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#app {
display: flex;
height: 100vh;
flex-direction: column;
}
#toolbar {
background: #f4f4f4;
border-bottom: 1px solid #ccc;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
#toolbar input, #toolbar button {
padding: 5px;
margin-right: 5px;
}
#main {
display: flex;
flex: 1;
}
#sidebar {
width: 200px;
background: #f4f4f4;
border-right: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
#sidebar img, #sidebar button {
width: 100%;
margin-bottom: 10px;
cursor: grab;
}
#canvas {
flex: 1;
position: relative;
background: #ddd;
overflow: hidden;
}
.draggable {
position: absolute;
width: 100px;
cursor: grab;
}
.text-box {
position: absolute;
padding: 5px;
background: white;
border: 1px solid #ccc;
cursor: grab;
}
</style>
</head>
<body>
<div id="app">
<div id="toolbar">
<label for="stageplan-name">Naam Stageplan:</label>
<input id="stageplan-name" type="text" placeholder="Stageplan naam">
<button id="save-plan">Opslaan</button>
<button id="add-page">Voeg Nieuwe Pagina Toe</button>
<button id="add-text">Voeg Tekstvak Toe</button>
<button id="open-plan">Open Stageplan</button>
<button id="delete-object">Verwijder Object</button>
<button id="presentation-mode-toggle">Schakel Presentatiemodus In/Uit</button>
<button id="previous-plan">Vorige</button>
<button id="next-plan">Volgende</button>
<button id="delete-all-plans">Verwijder Alle Stageplannen</button>
</div>
<div id="main">
<div id="sidebar">
<img src="piano.png" alt="Piano" draggable="true" class="tool" data-type="piano">
<img src="grand_piano.png" alt="Vleugel" draggable="true" class="tool" data-type="grand_piano">
<img src="drumset.png" alt="Drumstel" draggable="true" class="tool" data-type="drumset">
</div>
<div id="canvas"></div>
</div>
</div>
<script type="module">
const canvas = document.getElementById('canvas');
const tools = document.querySelectorAll('.tool');
const addTextButton = document.getElementById('add-text');
const addPageButton = document.getElementById('add-page');
const savePlanButton = document.getElementById('save-plan');
const openPlanButton = document.getElementById('open-plan');
const stageplanNameInput = document.getElementById('stageplan-name');
const presentationModeButton = document.getElementById('presentation-mode-toggle');
const deleteAllPlansButton = document.getElementById('delete-all-plans');
const previousPlanButton = document.getElementById('previous-plan');
const nextPlanButton = document.getElementById('next-plan');
// Firebase-configuratie
const firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Initialiseer Firebase
const app = firebase.initializeApp(firebaseConfig);
const db = firebase.database();
let savedStagePlans = {};
let currentStagePlan = [];
let currentPlanName = '';
let isPresentationMode = false;
let deleteConfirmationMode = false;
// Functie om stageplannen te laden uit Firebase
function loadPlans() {
const plansRef = db.ref('stagePlans'); // Verwijs naar de 'stagePlans' node in de database
plansRef.once('value').then((snapshot) => {
if (snapshot.exists()) {
savedStagePlans = snapshot.val();
console.log('Stageplannen succesvol geladen uit Firebase:', savedStagePlans);
} else {
console.log('Geen stageplannen gevonden in Firebase.');
}
}).catch((error) => {
console.error('Error loading plans:', error);
});
}
// Laad de stageplannen bij het starten van de applicatie
loadPlans();
// Eventlistener voor het verwijderen van alle stageplannen
deleteAllPlansButton.addEventListener('click', () => {
if (!deleteConfirmationMode) {
deleteConfirmationMode = true;
alert('Klik nogmaals op de knop "Verwijder Alle Stageplannen" om de actie te bevestigen.');
} else {
// Verwijder alle stageplannen uit Firebase
db.ref('stagePlans').remove()
.then(() => {
savedStagePlans = {};
currentStagePlan = [];
currentPlanName = '';
stageplanNameInput.value = '';
canvas.innerHTML = '';
alert('Alle stageplannen zijn verwijderd.');
deleteConfirmationMode = false;
})
.catch((error) => {
console.error('Error deleting plans:', error);
});
}
});
// Functie om stageplannen op te slaan in Firebase
function savePlans() {
const plansRef = db.ref('stagePlans'); // Verwijs naar de 'stagePlans' node in de database
plansRef.set(savedStagePlans, (error) => {
if (error) {
console.error('Error saving plans:', error);
} else {
console.log('Stageplannen succesvol opgeslagen in Firebase.');
}
});
}
// Rest van de code blijft hetzelfde
// ...
</script>
</body>
</html>
New contributor
Keano Kamer is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2