Javascript, Viewing [Object Htmlinputelement]

Javascript, viewing [object HTMLInputElement]

Say your variable is myNode, you can do myNode.value to retrieve the value of input elements.

Chrome Developer Tools has a Properties tab which shows useful DOM attributes.

Also see MDN for a reference.

javascript error [object HTMLInputElement][object HTMLInputElement]

The value property of input elements is used to retrieve the value enters in the input. This value will be a string.

Since you want to add numbers, it is better you check if the inputs entered are numbers to avoid unwanted bugs.
There are many ways to check this, one I've used it by adding '+' sign in front of the entered string value, this will convert a number in string to a number and then check for NaN.

here is the fiddle and code
https://jsfiddle.net/7sgcmfu8/

<script>  
function f2(){
var a= +document.getElementById("a").value;
var b= +document.getElementById("b").value;
if(!isNaN(a) && !isNaN(b)){
    document.write(a+b);
}else{
    document.write("enter numbers");
}
}
</script>  

Enter A:<input id="a" type="text" name="txt1" ><br>
Enter B:<input id="b" type="text" name="txt2" ><br>
<button type="button" onclick="f2()">Sum Here</button>

Getting [object HTMLInputElement] in display instead of number

When using .toString(), you get the string representation of the Input Element.

You want the value, so you can just call .value. In your example that would look like so:

let gq = getQuantity.value;

Javascript, The <p> element displays [object HTMLInputElement] why does it display this?

As @Teemu said in comment let uName is invisible for const info = new Information(uName);

Try following code.

uNameElement = document.getElementById('uName');
document.getElementById('submit').addEventListener('click', function() {
  const info = new Information(uNameElement.value);
  info.showInfo();
});
class Information {
  constructor(name) {
    this.name = name;
  }
  showInfo() {
    var z = document.createElement('p');
    z.textContent = this.name;
    document.body.appendChild(z);
  }
}

<form action="/home.php" method="get"></form>
<label for="fname">First name:</label>
<input type="text" name="name" id="uName" value="value" />
<button id="submit">Submit</button>

Viewing [object HTMLInputElement] - JavaScript

Using JavaScript & jQuery to extract the value of span:

var node = $('.CDMFOCT-span')[0].childNodes[0].nodeValue;

Edit: Or just simply:

var node = $(.CDMFOCT-span).text();

Read more about how to get text node of an element in this link

and now putting it in the hidden form field:

$("input#CDMFOCTtimer").val(node);

HTML5 form display [object HTMLInputElement][object HTMLInputElement] instead of actual result of addition of two numbers

Use value property as Object.prototype.valueOf() method returns the primitive value of the specified object(In your case, a DOMElement)

Also cast input-value to Number and then manipulate because Element.value returns a String and + will concatenate those values than adding them!

Unary plus (+), The unary plus operator precedes its operand and evaluates to its operand but attempts to converts it into a number, if it isn't already.

function addTwoNumbers() {  var firstNumber = +document.getElementById("txtFirstNumber").value;  var secondNumber = +document.getElementById("txtSecondNumber").value;  //Output of `valueOf()`  console.log(document.getElementById("txtFirstNumber").valueOf());  document.getElementById("txtResult").value = firstNumber + secondNumber;}

<form>  First number  <br>  <input type="text" ID="txtFirstNumber">  <br>Second number  <br>  <input type="text" ID="txtSecondNumber">  <br>Result:  <br>  <input type="text" ID="txtResult">  <br>  <br>  <input type="button" value='add' id='btnAdd' onclick="addTwoNumbers()" /></form>

why do i get this [object HTMLInputElement]?

why do i get this [object HTMLInputElement]?

Because JavaScript is case-sensitive, so here:

document.getElementById("firstname").value = firstname;

...you're using the automatic global created for the element by giving it the id "firstname". To use your firstName variable, be sure to capitalize the N.

A few other notes:

You don't declare your firstName variable, so your code is falling prey to what I call The Horror of Implicit Globals. Declare your variables (with var, let, or const).
if (sessionStorage.First_name != "undefined"){ will be true unless someone typed in the name "undefined" on a previous visit. To check whether sessionStorage has a First_name value stored, either compare with undefined:
```
if (sessionStorage.First_name !== undefined){
//                            ^^^^^^^^^^^^^
```
or use typeof:
```
if (typeof sessionStorage.First_name != "undefined"){
//  ^^^^^^
```
or use getItem and check for null:
```
if (sessionStorage.getItem("First_name") !== null){
```
More on MDN and in the spec.

There's no reason to use storage (or window) in this code:

var storage = window.sessionStorage;
var firstName = document.getElementById("firstname").value;
storage.setItem("First_name",firstName);

instead, just:

sessionStorage.setItem("First_name", document.getElementById("firstname").value);

or use assignment, to mirror the way you're accessing it later:

sessionStorage.First_name = document.getElementById("firstname").value;

(Personally, I prefer setItem and getItem, but it's a style choice.)

Although you can use if (formOkay == false){, the idiomatic code would be if (!formOkay){.

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

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?";

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>

object HTMLInputElement appears instead of checkbox

You need to use appendChild and not overwrite the innerHTML of the cell. You are adding a new element to the DOM. This can be done by writing the HTML into the cell, but you have created the element so just append it..

function addItem() {  var a = String(document.getElementById("it").value);  var b = parseFloat(document.getElementById("iq").value);  if (a.length === 0 || isNaN(b)) {    window.alert("Required field empty, please enter values in both boxes.");  } else {    var table = document.getElementById("list");    var row = table.insertRow(-1);    var cell1 = row.insertCell(0);    var cell2 = row.insertCell(1);    var cell3 = row.insertCell(2);    var cb = document.createElement("INPUT");    cb.setAttribute("type", "checkbox");    cell1.innerHTML = a;    cell2.innerHTML = b;    cell3.appendChild(cb);  }}

<table id="list" align="center">  <tr>    <td colspan="3">      <input id="it" name="item" type="text" placeholder="Item" />      <input id="iq" name="quantity" type="text" placeholder="No." />      <br />      <input value="Add Item" type="submit" onclick="addItem()" />      <hr />    </td>  </tr>  <tr>    <td><span>Item</span></td>    <td><span>Quantity</span></td>    <td><span>Collected</span></td>  </tr></table>

Getting back [object HTMLInputElement] as a result

Your problem is that you are assigning a HTMLInputElement to the innerHTML of your element instead of a text or a HTML content in the line:

document.getElementById('the-name').innerHTML = document.getElementById('name');

You need to get the input value:

document.getElementById('the-name').innerHTML = document.getElementById('name').value;

Demo:

'use strict';
$(document).ready(function() {});
function change() {  document.getElementById('the-name').innerHTML = document.getElementById('name').value;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p> What's your name? <input type="text" placeholder="Name" id="name"></input></p>
<button id="button" onclick="change(document.getElementById('name'))"> Answer </button>
<p>Hello <span id="the-name"></span>,</p>

Javascript, Viewing [Object Htmlinputelement]