为何使用jQuery/原生JS获取input元素值时返回undefined？

我一眼就发现问题所在了——你的HTML代码里用了中文全角引号，这直接导致浏览器无法正确解析元素属性，jQuery自然找不到对应的输入框，.val()也就返回undefined了。

核心问题：全角引号破坏了HTML解析 #

你看这段HTML代码：

<label id=”givenNameLabel” class =blueText>Please enter your given name: <input type = “text” name = “givenName” id= “givenName” value ="nn"> </label>

这里的id=”givenNameLabel”、type = “text”用的都是中文全角引号（”），而HTML规范要求属性必须使用英文半角引号（"或'）。浏览器会把这些全角引号当成元素内容的一部分，而不是属性的分隔符，所以你的输入框实际的id并不是givenName，jQuery选择器#givenName匹配不到任何元素，调用.val()自然就返回undefined了。

另外你还漏了class属性的引号，class =blueText这种写法也是不规范的，同样会影响浏览器解析。

修正步骤 #

1. 替换所有全角引号为半角引号，同时补上属性缺失的引号，修正后的HTML代码：

<form name="demoForm" id="demoForm">
  <label id="givenNameLabel" class="blueText">Please enter your given name:
    <input type="text" name="givenName" id="givenName" value="nn">
  </label>
  <button onclick="validate('givenName');">Validate this entry</button>
</form>

2. 确保jQuery已正确引入：如果你的页面还没加载jQuery库，一定要把jQuery的script标签放在你的自定义脚本代码之前，否则$()函数会直接报错。

额外测试：原生JS的修正方式 #

同样的，原生JS获取值的方式也会因为引号问题失败，修正引号后，原生写法也能正常工作：

// 原生JS获取值的正确写法（修正后可用）
var thisValue = document.getElementById(someTextID).value;

内容的提问来源于stack exchange，提问作者user2672224