如何用输入变量创建JSON对象？按钮触发问题排查

我最近遇到个头疼的小问题：想通过两个输入字段（id和title）的值生成对应的JSON对象，但不管换哪种写法，点击按钮后得到的都是空值。

我先获取了输入框的DOM元素：

// 获取输入框的值作为变量
let id = document.querySelector("#id");
let title = document.querySelector("#title");

之后试了三种写法，结果全是空值：

• 第一种写法：直接拼接字符串生成JSON

  var vObj= '{"id":"'+id.value+'","title":"'+title.value+'"}'
  

• 第二种写法：先创建空结构的对象再赋值

  var vObj = {"id":{},"v_title":{}, "v_category":{}};
  vObj.id=id.value;
  vObj.title=title.value;
  

• 第三种写法：先把输入值存到变量再创建对象

  let asd=id.value;
  let bsd=title.value;
  var vObj = {id:asd, title:bsd}
  

折腾半天最后才发现，原来是触发点击事件的按钮存在拼写错误！难怪所有获取输入值的逻辑都没正常执行，返回空值也就不奇怪了。

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