Firebase saving data
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I'm new to creating databases,
so I have some inputs the user need to fill. To book a time, to like the hairdresser or something. So I get an error when I press book. I don't really understand why the error is happening? So if you could explain why it's happening.
Error in console:
Uncaught TypeError: Cannot read property 'value' of null
at book (app.js:23)
at HTMLInputElement.onclick (index.html:22)
Error on line in js file
Uncaught TypeError: Cannot read property 'value' of null
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>
<script src="p5/p5.js"></script>
<script src="p5/addons/p5.dom.js"></script>
<script src="app.js"></script>
</head>
<body>
<input type='text' id='inputName' placeholder='full name' style='width:124px;' required>
<input type='text' id='inputTelefon' placeholder='Telefon number' required>
<br><br>
<input type='datetime-local' id='inputDate'>
<br><br>
<textarea id='inputMessage' cols='41' rows='10' placeholder='message here...'></textarea>
<br><br>
<input onclick="book()" type='button' id='bookBtn' value='Book' style='float:left;font-size:22px;'>
</body>
</html>
JavaScript:
var inputName = document.getElementById('inputName');
var inputTelefon = document.getElementById('inputTelefon');
var inputDatoOgTid = document.getElementById('inputDate');
var inputBesked = document.getElementById('inputMessage');
var bookBtn = document.getElementById('bookBtn');
var database;
function setup()
var config =
apiKey: "AIzaSyAJIAVkPZb6AzuezA0POkGdbkX2HDVnGPs",
authDomain: "okay-5d12f.firebaseapp.com",
databaseURL: "https://okay-5d12f.firebaseio.com",
projectId: "okay-5d12f",
storageBucket: "okay-5d12f.appspot.com",
messagingSenderId: "731997792130"
;
firebase.initializeApp(config);
database = firebase.database();
function book()
var data =
name: inputName.value(),
telefon: inputTelefon.value(),
dateAndTime: inputDatoOgTid.value(),
message: inputBesked.value()
console.log(data);
var ref = database.ref('bookings');
ref.push(data);
javascript html firebase
add a comment |
I'm new to creating databases,
so I have some inputs the user need to fill. To book a time, to like the hairdresser or something. So I get an error when I press book. I don't really understand why the error is happening? So if you could explain why it's happening.
Error in console:
Uncaught TypeError: Cannot read property 'value' of null
at book (app.js:23)
at HTMLInputElement.onclick (index.html:22)
Error on line in js file
Uncaught TypeError: Cannot read property 'value' of null
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>
<script src="p5/p5.js"></script>
<script src="p5/addons/p5.dom.js"></script>
<script src="app.js"></script>
</head>
<body>
<input type='text' id='inputName' placeholder='full name' style='width:124px;' required>
<input type='text' id='inputTelefon' placeholder='Telefon number' required>
<br><br>
<input type='datetime-local' id='inputDate'>
<br><br>
<textarea id='inputMessage' cols='41' rows='10' placeholder='message here...'></textarea>
<br><br>
<input onclick="book()" type='button' id='bookBtn' value='Book' style='float:left;font-size:22px;'>
</body>
</html>
JavaScript:
var inputName = document.getElementById('inputName');
var inputTelefon = document.getElementById('inputTelefon');
var inputDatoOgTid = document.getElementById('inputDate');
var inputBesked = document.getElementById('inputMessage');
var bookBtn = document.getElementById('bookBtn');
var database;
function setup()
var config =
apiKey: "AIzaSyAJIAVkPZb6AzuezA0POkGdbkX2HDVnGPs",
authDomain: "okay-5d12f.firebaseapp.com",
databaseURL: "https://okay-5d12f.firebaseio.com",
projectId: "okay-5d12f",
storageBucket: "okay-5d12f.appspot.com",
messagingSenderId: "731997792130"
;
firebase.initializeApp(config);
database = firebase.database();
function book()
var data =
name: inputName.value(),
telefon: inputTelefon.value(),
dateAndTime: inputDatoOgTid.value(),
message: inputBesked.value()
console.log(data);
var ref = database.ref('bookings');
ref.push(data);
javascript html firebase
should it be inputName.value?
– arjayosma
Nov 14 '18 at 9:42
@arjayosma no, it will just make other bug.
– orc13a
Nov 14 '18 at 10:06
Did you put this javascript onLoad() Maybe the DOM is not loaded when you called getElementById?
– Hassan
Nov 14 '18 at 12:11
add a comment |
I'm new to creating databases,
so I have some inputs the user need to fill. To book a time, to like the hairdresser or something. So I get an error when I press book. I don't really understand why the error is happening? So if you could explain why it's happening.
Error in console:
Uncaught TypeError: Cannot read property 'value' of null
at book (app.js:23)
at HTMLInputElement.onclick (index.html:22)
Error on line in js file
Uncaught TypeError: Cannot read property 'value' of null
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>
<script src="p5/p5.js"></script>
<script src="p5/addons/p5.dom.js"></script>
<script src="app.js"></script>
</head>
<body>
<input type='text' id='inputName' placeholder='full name' style='width:124px;' required>
<input type='text' id='inputTelefon' placeholder='Telefon number' required>
<br><br>
<input type='datetime-local' id='inputDate'>
<br><br>
<textarea id='inputMessage' cols='41' rows='10' placeholder='message here...'></textarea>
<br><br>
<input onclick="book()" type='button' id='bookBtn' value='Book' style='float:left;font-size:22px;'>
</body>
</html>
JavaScript:
var inputName = document.getElementById('inputName');
var inputTelefon = document.getElementById('inputTelefon');
var inputDatoOgTid = document.getElementById('inputDate');
var inputBesked = document.getElementById('inputMessage');
var bookBtn = document.getElementById('bookBtn');
var database;
function setup()
var config =
apiKey: "AIzaSyAJIAVkPZb6AzuezA0POkGdbkX2HDVnGPs",
authDomain: "okay-5d12f.firebaseapp.com",
databaseURL: "https://okay-5d12f.firebaseio.com",
projectId: "okay-5d12f",
storageBucket: "okay-5d12f.appspot.com",
messagingSenderId: "731997792130"
;
firebase.initializeApp(config);
database = firebase.database();
function book()
var data =
name: inputName.value(),
telefon: inputTelefon.value(),
dateAndTime: inputDatoOgTid.value(),
message: inputBesked.value()
console.log(data);
var ref = database.ref('bookings');
ref.push(data);
javascript html firebase
I'm new to creating databases,
so I have some inputs the user need to fill. To book a time, to like the hairdresser or something. So I get an error when I press book. I don't really understand why the error is happening? So if you could explain why it's happening.
Error in console:
Uncaught TypeError: Cannot read property 'value' of null
at book (app.js:23)
at HTMLInputElement.onclick (index.html:22)
Error on line in js file
Uncaught TypeError: Cannot read property 'value' of null
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>
<script src="p5/p5.js"></script>
<script src="p5/addons/p5.dom.js"></script>
<script src="app.js"></script>
</head>
<body>
<input type='text' id='inputName' placeholder='full name' style='width:124px;' required>
<input type='text' id='inputTelefon' placeholder='Telefon number' required>
<br><br>
<input type='datetime-local' id='inputDate'>
<br><br>
<textarea id='inputMessage' cols='41' rows='10' placeholder='message here...'></textarea>
<br><br>
<input onclick="book()" type='button' id='bookBtn' value='Book' style='float:left;font-size:22px;'>
</body>
</html>
JavaScript:
var inputName = document.getElementById('inputName');
var inputTelefon = document.getElementById('inputTelefon');
var inputDatoOgTid = document.getElementById('inputDate');
var inputBesked = document.getElementById('inputMessage');
var bookBtn = document.getElementById('bookBtn');
var database;
function setup()
var config =
apiKey: "AIzaSyAJIAVkPZb6AzuezA0POkGdbkX2HDVnGPs",
authDomain: "okay-5d12f.firebaseapp.com",
databaseURL: "https://okay-5d12f.firebaseio.com",
projectId: "okay-5d12f",
storageBucket: "okay-5d12f.appspot.com",
messagingSenderId: "731997792130"
;
firebase.initializeApp(config);
database = firebase.database();
function book()
var data =
name: inputName.value(),
telefon: inputTelefon.value(),
dateAndTime: inputDatoOgTid.value(),
message: inputBesked.value()
console.log(data);
var ref = database.ref('bookings');
ref.push(data);
javascript html firebase
javascript html firebase
asked Nov 14 '18 at 9:24
orc13aorc13a
367
367
should it be inputName.value?
– arjayosma
Nov 14 '18 at 9:42
@arjayosma no, it will just make other bug.
– orc13a
Nov 14 '18 at 10:06
Did you put this javascript onLoad() Maybe the DOM is not loaded when you called getElementById?
– Hassan
Nov 14 '18 at 12:11
add a comment |
should it be inputName.value?
– arjayosma
Nov 14 '18 at 9:42
@arjayosma no, it will just make other bug.
– orc13a
Nov 14 '18 at 10:06
Did you put this javascript onLoad() Maybe the DOM is not loaded when you called getElementById?
– Hassan
Nov 14 '18 at 12:11
should it be inputName.value?
– arjayosma
Nov 14 '18 at 9:42
should it be inputName.value?
– arjayosma
Nov 14 '18 at 9:42
@arjayosma no, it will just make other bug.
– orc13a
Nov 14 '18 at 10:06
@arjayosma no, it will just make other bug.
– orc13a
Nov 14 '18 at 10:06
Did you put this javascript onLoad() Maybe the DOM is not loaded when you called getElementById?
– Hassan
Nov 14 '18 at 12:11
Did you put this javascript onLoad() Maybe the DOM is not loaded when you called getElementById?
– Hassan
Nov 14 '18 at 12:11
add a comment |
2 Answers
2
active
oldest
votes
Try to put your javascript code within:
window.onload = function()
//Your code here
;
Since the javascript that you wrote might have fired before the DOM is loaded, and so it will not find the element that you've tried to get.
1
Noo. don't think I need that. And I fixed the bug.
– orc13a
Nov 14 '18 at 12:15
1
@Tester I tried your suggestion but it is not working in my case also.
– Maqsood
Nov 15 '18 at 16:44
@Tester It is not working
– Houssein Zouari
Nov 15 '18 at 16:46
add a comment |
So i fixed the bug. I change the var data = and made a new book function.
(The HTML is the same)
JavaScript:
var inputName; //= document.getElementById('inputName');
var inputTelefon; //= document.getElementById('inputTelefon');
var inputDatoOgTid; //= document.getElementById('inputDate');
var inputBesked; //= document.getElementById('inputMessage');
var database;
function setup()
var config =
apiKey: "AIzaSyAJIAVkPZb6AzuezA0POkGdbkX2HDVnGPs",
authDomain: "okay-5d12f.firebaseapp.com",
databaseURL: "https://okay-5d12f.firebaseio.com",
projectId: "okay-5d12f",
storageBucket: "okay-5d12f.appspot.com",
messagingSenderId: "731997792130"
;
firebase.initializeApp(config);
function book()
var inputName = document.getElementById('inputName').value;
var inputTelefon = document.getElementById('inputTelefon').value;
var inputDatoOgTid = document.getElementById('inputDate').value;
var inputBesked = document.getElementById('inputMessage').value;
var data =
name: inputName,
telefon: inputTelefon,
dateAndTime: inputDatoOgTid,
message: inputBesked
database = firebase.database();
var ref = database.ref('bookings');
ref.push(data);
console.log(data);
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53296774%2ffirebase-saving-data%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try to put your javascript code within:
window.onload = function()
//Your code here
;
Since the javascript that you wrote might have fired before the DOM is loaded, and so it will not find the element that you've tried to get.
1
Noo. don't think I need that. And I fixed the bug.
– orc13a
Nov 14 '18 at 12:15
1
@Tester I tried your suggestion but it is not working in my case also.
– Maqsood
Nov 15 '18 at 16:44
@Tester It is not working
– Houssein Zouari
Nov 15 '18 at 16:46
add a comment |
Try to put your javascript code within:
window.onload = function()
//Your code here
;
Since the javascript that you wrote might have fired before the DOM is loaded, and so it will not find the element that you've tried to get.
1
Noo. don't think I need that. And I fixed the bug.
– orc13a
Nov 14 '18 at 12:15
1
@Tester I tried your suggestion but it is not working in my case also.
– Maqsood
Nov 15 '18 at 16:44
@Tester It is not working
– Houssein Zouari
Nov 15 '18 at 16:46
add a comment |
Try to put your javascript code within:
window.onload = function()
//Your code here
;
Since the javascript that you wrote might have fired before the DOM is loaded, and so it will not find the element that you've tried to get.
Try to put your javascript code within:
window.onload = function()
//Your code here
;
Since the javascript that you wrote might have fired before the DOM is loaded, and so it will not find the element that you've tried to get.
edited Nov 14 '18 at 12:15
answered Nov 14 '18 at 12:13
HassanHassan
60521230
60521230
1
Noo. don't think I need that. And I fixed the bug.
– orc13a
Nov 14 '18 at 12:15
1
@Tester I tried your suggestion but it is not working in my case also.
– Maqsood
Nov 15 '18 at 16:44
@Tester It is not working
– Houssein Zouari
Nov 15 '18 at 16:46
add a comment |
1
Noo. don't think I need that. And I fixed the bug.
– orc13a
Nov 14 '18 at 12:15
1
@Tester I tried your suggestion but it is not working in my case also.
– Maqsood
Nov 15 '18 at 16:44
@Tester It is not working
– Houssein Zouari
Nov 15 '18 at 16:46
1
1
Noo. don't think I need that. And I fixed the bug.
– orc13a
Nov 14 '18 at 12:15
Noo. don't think I need that. And I fixed the bug.
– orc13a
Nov 14 '18 at 12:15
1
1
@Tester I tried your suggestion but it is not working in my case also.
– Maqsood
Nov 15 '18 at 16:44
@Tester I tried your suggestion but it is not working in my case also.
– Maqsood
Nov 15 '18 at 16:44
@Tester It is not working
– Houssein Zouari
Nov 15 '18 at 16:46
@Tester It is not working
– Houssein Zouari
Nov 15 '18 at 16:46
add a comment |
So i fixed the bug. I change the var data = and made a new book function.
(The HTML is the same)
JavaScript:
var inputName; //= document.getElementById('inputName');
var inputTelefon; //= document.getElementById('inputTelefon');
var inputDatoOgTid; //= document.getElementById('inputDate');
var inputBesked; //= document.getElementById('inputMessage');
var database;
function setup()
var config =
apiKey: "AIzaSyAJIAVkPZb6AzuezA0POkGdbkX2HDVnGPs",
authDomain: "okay-5d12f.firebaseapp.com",
databaseURL: "https://okay-5d12f.firebaseio.com",
projectId: "okay-5d12f",
storageBucket: "okay-5d12f.appspot.com",
messagingSenderId: "731997792130"
;
firebase.initializeApp(config);
function book()
var inputName = document.getElementById('inputName').value;
var inputTelefon = document.getElementById('inputTelefon').value;
var inputDatoOgTid = document.getElementById('inputDate').value;
var inputBesked = document.getElementById('inputMessage').value;
var data =
name: inputName,
telefon: inputTelefon,
dateAndTime: inputDatoOgTid,
message: inputBesked
database = firebase.database();
var ref = database.ref('bookings');
ref.push(data);
console.log(data);
add a comment |
So i fixed the bug. I change the var data = and made a new book function.
(The HTML is the same)
JavaScript:
var inputName; //= document.getElementById('inputName');
var inputTelefon; //= document.getElementById('inputTelefon');
var inputDatoOgTid; //= document.getElementById('inputDate');
var inputBesked; //= document.getElementById('inputMessage');
var database;
function setup()
var config =
apiKey: "AIzaSyAJIAVkPZb6AzuezA0POkGdbkX2HDVnGPs",
authDomain: "okay-5d12f.firebaseapp.com",
databaseURL: "https://okay-5d12f.firebaseio.com",
projectId: "okay-5d12f",
storageBucket: "okay-5d12f.appspot.com",
messagingSenderId: "731997792130"
;
firebase.initializeApp(config);
function book()
var inputName = document.getElementById('inputName').value;
var inputTelefon = document.getElementById('inputTelefon').value;
var inputDatoOgTid = document.getElementById('inputDate').value;
var inputBesked = document.getElementById('inputMessage').value;
var data =
name: inputName,
telefon: inputTelefon,
dateAndTime: inputDatoOgTid,
message: inputBesked
database = firebase.database();
var ref = database.ref('bookings');
ref.push(data);
console.log(data);
add a comment |
So i fixed the bug. I change the var data = and made a new book function.
(The HTML is the same)
JavaScript:
var inputName; //= document.getElementById('inputName');
var inputTelefon; //= document.getElementById('inputTelefon');
var inputDatoOgTid; //= document.getElementById('inputDate');
var inputBesked; //= document.getElementById('inputMessage');
var database;
function setup()
var config =
apiKey: "AIzaSyAJIAVkPZb6AzuezA0POkGdbkX2HDVnGPs",
authDomain: "okay-5d12f.firebaseapp.com",
databaseURL: "https://okay-5d12f.firebaseio.com",
projectId: "okay-5d12f",
storageBucket: "okay-5d12f.appspot.com",
messagingSenderId: "731997792130"
;
firebase.initializeApp(config);
function book()
var inputName = document.getElementById('inputName').value;
var inputTelefon = document.getElementById('inputTelefon').value;
var inputDatoOgTid = document.getElementById('inputDate').value;
var inputBesked = document.getElementById('inputMessage').value;
var data =
name: inputName,
telefon: inputTelefon,
dateAndTime: inputDatoOgTid,
message: inputBesked
database = firebase.database();
var ref = database.ref('bookings');
ref.push(data);
console.log(data);
So i fixed the bug. I change the var data = and made a new book function.
(The HTML is the same)
JavaScript:
var inputName; //= document.getElementById('inputName');
var inputTelefon; //= document.getElementById('inputTelefon');
var inputDatoOgTid; //= document.getElementById('inputDate');
var inputBesked; //= document.getElementById('inputMessage');
var database;
function setup()
var config =
apiKey: "AIzaSyAJIAVkPZb6AzuezA0POkGdbkX2HDVnGPs",
authDomain: "okay-5d12f.firebaseapp.com",
databaseURL: "https://okay-5d12f.firebaseio.com",
projectId: "okay-5d12f",
storageBucket: "okay-5d12f.appspot.com",
messagingSenderId: "731997792130"
;
firebase.initializeApp(config);
function book()
var inputName = document.getElementById('inputName').value;
var inputTelefon = document.getElementById('inputTelefon').value;
var inputDatoOgTid = document.getElementById('inputDate').value;
var inputBesked = document.getElementById('inputMessage').value;
var data =
name: inputName,
telefon: inputTelefon,
dateAndTime: inputDatoOgTid,
message: inputBesked
database = firebase.database();
var ref = database.ref('bookings');
ref.push(data);
console.log(data);
answered Nov 14 '18 at 12:14
orc13aorc13a
367
367
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53296774%2ffirebase-saving-data%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
should it be inputName.value?
– arjayosma
Nov 14 '18 at 9:42
@arjayosma no, it will just make other bug.
– orc13a
Nov 14 '18 at 10:06
Did you put this javascript onLoad() Maybe the DOM is not loaded when you called getElementById?
– Hassan
Nov 14 '18 at 12:11