Firebase saving data

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);

}

asked Nov 14 '18 at 9:24

orc13a

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?

– Tester
Nov 14 '18 at 12:11

add a comment |

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);

}

asked Nov 14 '18 at 9:24

orc13a

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?

– Tester
Nov 14 '18 at 12:11

add a comment |

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);

}

asked Nov 14 '18 at 9:24

orc13a

367

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

asked Nov 14 '18 at 9:24

orc13a

367

asked Nov 14 '18 at 9:24

orc13a

367

asked Nov 14 '18 at 9:24

orc13a

367

asked Nov 14 '18 at 9:24

orc13a

367

asked Nov 14 '18 at 9:24

orc13a

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?

– Tester
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?

– Tester
Nov 14 '18 at 12:11

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?

– Tester
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.

edited Nov 14 '18 at 12:15

answered Nov 14 '18 at 12:13

Tester

58421027

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);

}

answered Nov 14 '18 at 12:14

orc13a

367

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
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

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

Name

Required, but never shown

2 Answers
2

active

oldest

votes

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.

edited Nov 14 '18 at 12:15

answered Nov 14 '18 at 12:13

Tester

58421027

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.

edited Nov 14 '18 at 12:15

answered Nov 14 '18 at 12:13

Tester

58421027

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.

edited Nov 14 '18 at 12:15

answered Nov 14 '18 at 12:13

Tester

58421027

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

Tester

58421027

edited Nov 14 '18 at 12:15

answered Nov 14 '18 at 12:13

Tester

58421027

answered Nov 14 '18 at 12:13

Tester

58421027

answered Nov 14 '18 at 12:13

Tester

58421027

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

Noo. don't think I need that. And I fixed the bug.

– orc13a
Nov 14 '18 at 12:15

@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);

}

answered Nov 14 '18 at 12:14

orc13a

367

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);

}

answered Nov 14 '18 at 12:14

orc13a

367

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);

}

answered Nov 14 '18 at 12:14

orc13a

367

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

orc13a

367

answered Nov 14 '18 at 12:14

orc13a

367

answered Nov 14 '18 at 12:14

orc13a

367

answered Nov 14 '18 at 12:14

orc13a

367

add a comment |

draft saved

draft discarded

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky