Why am I getting a [object HTMLInputElement] in my Javascript code?

Question

I'm working on a project that I can't get my head around. Fairly new to Javascript, so it isn't too surprising. What I'm attempting is to have a user input their name in the html document, have my javascript file record that name to a variable called userName, then have the next label that appears on the following question add their name to the label for customization. My javascript source file is stored in the same folder as the index.html and is linked in the head of the html file as:

I've included more than is strictly necessary just to show the initializations. Before clicking the button, my 2nd label looks like:

Who are you adventuring with? (Select all that apply) Solo Couple Family Small Group Large Group

After I click it, it shows:

Thanks [object HTMLInputElement]. who are you going on an adventure with?

First time using stackoverflow, so if I did this wrong let me know.

HTML Section

<!-- Creates app container-->
    <div class="appContainer">
      <br />
      <!-- 1st section. Gather name -->
      <div class="gatherName">
        <label id="lblName"> What's your name?</label>
        <input type="text" id="inputName" />
        <button type="button" id="nameBtn" onclick="getGroupSize()">
          Next
        </button>

        <br />
        <br />
      </div>

Javascript File

// Declarations
var lbl;
let userName;
var groupSizeSolo;
var groupSizeCouple;
var groupSizeFamily;
var groupSizeSmall;
var groupSizeLarge;

//Functions

function getUserName(params) {}

function getGroupSize() {
  let lbl = document.getElementById("lblGroupSize");
  let userName = document.getElementById("inputName");

  //Assign new label based off user input
  lbl.innerHTML =
    "Thanks " + userName + ". who are you going on an adventure with?";
}

Answer 1

When you use getElementById It returns the HTMLInputElement which you are getting.

An Element object describing the DOM element object matching the specified ID, or null if no matching element was found in the document. - MDN

So you need the value

let userName = document.getElementById("inputName").value;
lbl.innerHTML =
    "Thanks " + userName + ". who are you going on an adventure with?";

or

let userName = document.getElementById("inputName");
lbl.innerHTML =
    "Thanks " + userName.value + ". who are you going on an adventure with?";

 var lbl; let userName; var groupSizeSolo; var groupSizeCouple; var groupSizeFamily; var groupSizeSmall; var groupSizeLarge; //Functions function getUserName(params) {} function getGroupSize() { let lbl = document.getElementById("lblGroupSize"); let userName = document.getElementById("inputName"); //Assign new label based off user input lbl.innerHTML = "Thanks " + userName.value + ". who are you going on an adventure with?"; }

 <div class="appContainer"> <br /> <.-- 1st section? Gather name --> <div class="gatherName"> <label id="lblName"> What's your name?</label> <input type="text" id="inputName" /> <button type="button" id="nameBtn" onclick="getGroupSize()"> Next </button> <br /> <br /> </div> <div id="lblGroupSize"></div> </div>

Answer 2

There are few thing you got wrong here.

html -

    <html>
        <div class="appContainer">
          <br />
          <!-- 1st section. Gather name -->
          <div class="gatherName">
            <label id="lblName"> What's your name?</label>
            <input type="text" id="inputName" />
            <button type="button" id="nameBtn" onclick="getGroupSize()">
              Next
            </button>
            <br />
            <label id="lbl"></label>
        
            
            <br />
          </div>
    </div>
    </html

javascript -

   function getGroupSize() {
      let lbl = document.getElementById("lbl");
      let userName = document.getElementById("inputName").value;
    
      //Assign new label based off user input
      lbl.innerHTML =
        "Thanks " + userName + ". who are you going on an adventure with?";
   }

things to note,

Get the value from a HTML, use.value attribute.
Don't declare same variables multiple times.

Why am I getting a [object HTMLInputElement] in my Javascript code?

Question

2 answers

solution1
1 ACCPTED 2021-06-17 01:29:38

solution2
0 2021-06-17 01:59:22

Why am I getting a [object HTMLInputElement] in my Javascript code?

Question

2 answers

solution1 1 ACCPTED 2021-06-17 01:29:38

solution2 0 2021-06-17 01:59:22

solution1
1 ACCPTED 2021-06-17 01:29:38

solution2
0 2021-06-17 01:59:22