I’ve created a “+” button to send text from an input field to my Firebase database. However, the result is not showing up in that database, and the “+” button is not clickable 🙁 Please take a look at my code below.
index.html:
<!doctype html>
<html>
<head>
<title>Reel Time</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Ultra&display=swap" rel="stylesheet">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h1>Reel Time</h1>
<div class="field">
<input type="text" id="input-field" placeholder="Pulp Fiction">
<button id="add-button">+</button>
</div>
</div>
<script src="functions.js" type="module"></script>
<script src="index.js" type="module"></script>
</body>
</html>
index.js:
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js"
import { getDatabase, ref, push } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-database.js"
const appSettings = {
databaseURL: "https://playground-91206-default-rtdb.asia-southeast1.firebasedatabase.app/"
}
const app = initializeApp(appSettings)
const database = getDatabase(app)
const moviesInDB = ref(database, "movies")
const inputFieldEl = document.getElementById("input-field")
const addButtonEl = document.getElementById("add-button")
addButtonEl.addEventListener("click", function() {
let inputValue = inputFieldEl.value
push(moviesInDB, inputValue)
console.log(`${inputValue} added to database`)
})
functions.js:
export function add(a,b) {
return a + b
}
Please advise 🙂