关于#javascript#的问题：运行结果及报错内容 无法调用

add: function() {

            var obj = {};
            var id = document.querySelector(".id").value; //姓名
            var name = document.querySelector(".name").value; //姓名
            var age = document.querySelector(".age").value; //年龄
            var height = document.querySelector(".height").value; //身高
            var school = document.querySelector(".school").value; //学校

            obj.name = name;
            obj.age = age;
            obj.height = height;
            obj.school = school;
            alert("ssss ");

            this.msg.push(obj);

运行结果及报错内容 无法调用

我的解答思路和尝试过的方法

我想要达到的结果

给控件设置Id,用document.getElementById方法获取值。

            var id = document.getElementById("id").value; //姓名
            var name = getElementById.getElementById("name").value; //姓名
            var age = document.getElementById("age").value; //年龄
            var height = document.getElementById("height").value; //身高
            var school = document.getElementById("school").value; //学校

出什么错误，代码看起来没问题，html代码发下。
document.querySelector(".name") 是通过class获取元素
如果name是元素的id要把“.”改成 "#"
document.querySelector("#name")

            var id = document.querySelector("#id").value; //姓名
            var name = document.querySelector("#name").value; //姓名
            var age = document.querySelector("#age").value; //年龄
            var height = document.querySelector("#height").value; //身高
            var school = document.querySelector("#school").value; //学校

如有帮助，望采纳！谢谢!