Take HTML Form Input & Set Those Inputs To Variables In JS

I am building a booking form and I would like to read back what the user inputted so they can confirm their details. I am guessing what I have to do is create some JS variables for each of the form inputs, then set those variables = to the value of that input, then use a DOM to set the .InnerHTML of the confirm details page

I tried creating a function that pulls the values of the inputs then set those to a variable, then set those variables to the text on the confirm modal.

var Name = "Name";

/*Form Field ID*/

document.getelementbyid("InputName").value = Name;

/*Text Element ID That I want To Set The Text Too*/

document.getelementbyid("BookingName").innerhtml = Name;

I would think I need to put all of that into a function, however, when I pull up the chrome console I get this error-

Uncaught TypeError: document.getelementbyid is not a function

3 answers

  • answered 2019-10-15 14:36 Octavian Tarasa

    You have to write with uppercase, like this: document.getElementById()

  • answered 2019-10-15 14:36 Sundeep Pidugu

    You have it all correct but the typo is wrong Please use

    document.getElementById and innerHTML

    Reference :

    Document.getElementById() - https://developer.mozilla.org

    Element.innerHTML - https://developer.mozilla.org

  • answered 2019-10-15 14:39 Jay Kariesch

    The previous posters have the correct answer, but to expand on it a bit, in JavaScript, there's a styleguide: https://www.w3schools.com/js/js_conventions.asp

    What "styleguide" means in this context is, there's a casing convention called "camel case". It's used across the language, and can be anticipated in most native methods.

    This is why in tutorials you'll see examples like...

    var firstName = 'Jay'
    var lastName = 'Kariesch'

    Note that the first letter is undercase, while the second word is capitalized. This is an example of camel case.

    In the case of methods, you can anticipate they'll be camel cased, too.

    For example...

    // or
    // or even
    document.addEventListener('click', someFunc)