javascript - 我如何将 html 输入数据传递给 javascript 类

标签 javascript es6-class

我正在尝试将数据从 html 输入传递到普通 JS 类构造函数。 这是我尝试过的。

class Users {
  constructor(email,password) {
    this.email = email;
    this.password = password;

  }


  login(){
      // url for endpoint
let url = "http://127.0.0.1:5000/api/v2/users/login"

alert(this.password)

// get login data from ui
let data = {
  email : this.email,
  password : this.password
};

}
let email = document.getElementById('email').value,
let password = document.getElementById('password').value
const user = new Users(email,password)
document.getElementById('login').addEventListener('submit', user.login())

似乎没有数据传递到电子邮件和密码变量。

我也尝试过这样做,但该对象没有被调用

class Users {
  constructor(email,password) {
    this.email = email;
    this.password = password;

  }

        login(){
    // user the data here

}
function load(event){
   let email = document.getElementById('email').value,
   let password = document.getElementById('password').value
   const user = new Users(email,password)
   user.login()
}

document.getElementById('login').addEventListener('submit', load)

有人帮助我解决这个问题。

最佳答案

我已尽力重构您的代码。根据您想要对数据执行的操作,这取决于您。但在下面的代码中,您可以在登录功能中获取电子邮件和密码

class Users {
  constructor() {    
  }
  
  login(){
    
    let email = document.getElementById('email').value, 
        password = document.getElementById('password').value
    
    alert(email, password)
  }
}

    
const user = new Users();
const login = user.login
<input type="text" id="email" />
<input type="text" id="password" />
<button id="login" onclick="login()">submit</button>

关于javascript - 我如何将 html 输入数据传递给 javascript 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53224155/

相关文章:

javascript - ES2015 中的条件导出

javascript - 在 Firefox 中使用 eval 方法从字符串中获取类

javascript - 将一个字符放入具有指定类别的空 div-s 中

javascript - Array.prototype.includes 函数如何比较对象

javascript - PouchDB:返回query()结果对象

javascript - 在客户端设置显示没有任何 asp 面板在任何 linkBut​​tonclick 上重新显示它

javascript - 一个新对象抛出 "Unexpected token."nodejs

javascript - C3 使用分类 JSON 数据创建条形图

reactjs - easy-peasy:useStoreState 不适用于 ES6 类实例

javascript - 在存在 getter 的情况下使用 Mobx makeObservable 使 setter 成为一个 Action