在javascript中输入字符串答案

【问题标题】：input string in javascript在javascript中输入字符串
【发布时间】：2014-09-26 14:40:52
【问题描述】：

小问题

问题

如何从 HTML 的输入中访问字符串值 "2013-10-20" 以在 JavaScript 中显示它？

HTML

<input name="DateStart" class="inputPanel" type="text" size="20" maxlength="20" value="2013-10-20">

JAVASCRIPT

<script javascript="javascript" type="text/javascript">
    alert("Value: " + ???)
</script>

谢谢！

【问题讨论】：

【解决方案1】：

从当前代码你可以使用getElementsByName

var dateStart = document.getElementsByName('DateStart')[0];
alert("Value: " + dateStart.value);

但建议在 DOM 元素上使用 best practice to add Id attribute 并在 JavaScript 中使用 getElementById 来检索 DOM 元素。（看看name vs id）

HTML

<input id="DateStart" name="DateStart" class="inputPanel" type="text" size="20" maxlength="20" value="2013-10-20">

JavaScript

var dateStart = document.getElementById('DateStart');
alert("Value: " + dateStart.value);

【讨论】：

【解决方案2】：

如果输入的是一个表单，并且文档中只有一个表单，你可以这样访问它：

alert(document.forms[0].DateStart.value);

如果表单有一个可以使用的名称：

alert(document.forms['formName'].DateStart.value);

或者如果你喜欢啰嗦：

alert(document.forms['formName'].elements['DateStart'].value);

或者如果名称也是一个有效的标识符（即您也可以用作变量名的名称）

alert(document.forms.formName.DateStart.value);

甚至：

alert(document.formName.DateStart.value);

或者一个 ID：

alert(document.getElementById('formId').DateStart.value);

或者使用querySelector接口：

alert(document.querySelector('input[name="DateStart"]').value);

给那只猫剥皮的方法很多。

【讨论】：

【解决方案3】：

你可以像下面这样说

alert(document.getElementsByClassName('inputPanel')[0].value);

如果这是第一个具有类 inputPanel 的元素。

【讨论】：

【解决方案4】：

假设您有一个名称为 DateStart(use id's) 的输入：

alert("Value: " + document.getElementsByName('DateStart')[0].value);

【讨论】：