Question

我正在使用HTML和JavaScript作为学校项目创建通用转换器，并且要转换两个单位的内容，例如英尺到英里，首先必须键入要转换为表单的内容。然后，当点击确认按钮时，[此时，因为您还无法转换内容]，它应该将HTML中的范围值更改为已输入到表单中的内容。 / p>

但是，现在，当单击按钮时，无论放入表单中的内容，span的值总是会更改为＆＃34; [object HTMLInputElement]＆＃34;。

HTML和JavaScript如下所示。

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

感谢。

Answer 1

您需要输入的值。变化：

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

为：

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

<强> jsFiddle example

Answer 2

尝试

 unitType.innerHTML = unitInput.value;

Answer 3

addEventListener是向HTML元素添加事件的优雅方式。请注意，如果要向DOM中注入任意用户输入，则可能容易受XSS攻击。确保进行适当的输入卫生，例如将HTML转换为html特殊字符。

如果您通过console.dir查看unitInput变量，则可以看到属性。可以通过点表示法访问这些属性中的每一个。 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);
});

INPUT元素的属性。（铬）

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 4

使用document.getElementById('unit');时，实际上并没有获得文本输入的值。只获得元素。您需要获取文本框的值，如下所示：

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

这将获得文本框的值。

参考文献：MDN

Answer 5

从“unit”获取 .value

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

如何将表单的内容输入为变量？

5 个答案: