How to input the content of a form as a variable?

Question

I'm creating a universal converter using HTML and JavaScript as a school project, and to convert two units of something, such as feet to miles, you first have to type what you want to convert into a form. Then, when the Confirm button is hit, [at this point, because you can't convert things yet] it's supposed to change the value of a span in HTML to what has been typed into the form.

Right now, though, when the button is clicked, no matter what is put into the form, the span's value always gets changed to "[object HTMLInputElement]".

The HTML and JavaScript are below.

HTML:

 <form>
    <input type="text" id="unit">
</form>
<br>
    <button class="btn btn-sm btn-danger" id="confirm">Confirm</button>
<br>
<br>
    <h4>Pick two units of <span id="unitType">[?]</span> you want to convert.</h4>

JavaScript:

document.getElementById("confirm").onclick = function() {
    var unitInput = document.getElementById("unit");
    var unitType = document.getElementById("unitType");
    unitType.innerHTML = unitInput;
};

Thanks.

Answer 1

You are not actually getting the value of the text input when you use document.getElementById('unit');. That only gets the element. You need to get the value of the textbox like this:

var unitInput = document.getElementById('unit').value;

That will get the value of the textbox.

References: MDN

Answer 2

You need the input's value. Change:

var unitInput = document.getElementById("unit");

to:

var unitInput = document.getElementById("unit").value;

jsFiddle example

Answer 3

Try

 unitType.innerHTML = unitInput.value;

Answer 4

addEventListener is the classy way to add events to HTML elements. Be aware that you may vulnerable to XSS if you are injecting arbitrary user input into the DOM. Make sure to do proper input sanitation such as converting HTML to html special characters.

If you take a look at the unitInput variable via console.dir you can see the properties. Each one of those properties can be accessed via the dot notation. objectName.propertyName

var element   = document.getElementById('confirm');
// to verbosely answer your question, to get input value, 
// you need to get the value
// property of the element
var unitInput = document.getElementById("unit").value;
var unitType  = document.getElementById("unitType");
element.addEventListener('click', function(e) {
  unitType.innerHTML = escape(unitInput);
});

The properties of an INPUT element. (chrome)

input
accept: ""
accessKey: ""
align: ""
alt: ""
attributes: NamedNodeMap
autocomplete: ""
autofocus: false
baseURI: ""
checked: false
childElementCount: 0
childNodes: NodeList[0]
children: HTMLCollection[0]
classList: DOMTokenList
className: ""
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 0
contentEditable: "inherit"
dataset: DOMStringMap
defaultChecked: false
defaultValue: ""
dir: ""
dirName: ""
disabled: false
draggable: false
files: null
firstChild: null
firstElementChild: null
form: null
formAction: ""
formEnctype: ""
formMethod: ""
formNoValidate: false
formTarget: ""
height: 0
hidden: false
id: ""
incremental: false
indeterminate: false
innerHTML: ""
innerText: ""
isContentEditable: false
labels: NodeList[0]
lang: ""
lastChild: null
lastElementChild: null
list: null
localName: "input"
max: ""
maxLength: 524288
min: ""
multiple: false
name: ""
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: null
nodeName: "INPUT"
nodeType: 1
nodeValue: null
offsetHeight: 0
offsetLeft: 0
offsetParent: null
offsetTop: 0
offsetWidth: 0
onabort: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onsearch: null
onseeked: null
onseeking: null
onselect: null
onselectstart: null
onshow: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
onvolumechange: null
onwaiting: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwebkitspeechchange: null
onwheel: null
outerHTML: "<input>"
outerText: ""
ownerDocument: document
parentElement: null
parentNode: null
pattern: ""
placeholder: ""
prefix: null
previousElementSibling: null
previousSibling: null
readOnly: false
required: false
scrollHeight: 0
scrollLeft: 0
scrollTop: 0
scrollWidth: 0
selectionDirection: "forward"
selectionEnd: 0
selectionStart: 0
size: 20
spellcheck: true
src: ""
step: ""
style: CSSStyleDeclaration
tabIndex: 0
tagName: "INPUT"
textContent: ""
title: ""
translate: true
type: "text"
useMap: ""
validationMessage: ""
validity: ValidityState
value: ""
valueAsDate: null
valueAsNumber: NaN
webkitEntries: Array[0]
webkitGrammar: false
webkitShadowRoot: null
webkitSpeech: false
webkitdirectory: false
webkitdropzone: ""
width: 0
willValidate: true
__proto__: HTMLInputElement

Answer 5

get .value from "unit"

document.getElementById("confirm").onclick = function() {
   var unitInput = document.getElementById("unit").value;
   var unitType = document.getElementById("unitType");
   unitType.innerHTML = unitInput;
};