时间戳

首页 > 解决方案 > 将事件侦听器添加到按钮时如何调试

javascript - 将事件侦听器添加到按钮时如何调试

问题描述

我想创建一个简单的登录，要求用户输入用户名和密码。同时我想用调试控制台检查我是否做错了。但是，一旦我单击该按钮，我就会在控制台中看到日志，但它很快就消失了。为什么不留？我该怎么做才能让控制台保持不变？

const account1 = {
  owner: 'Jonas Schmedtmann',
  movements: [200, 450, -400, 3000, -650, -130, 70, 1300],
  interestRate: 1.2, // %
  pin: 1111,
};

const account2 = {
  owner: 'Jessica Davis',
  movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30],
  interestRate: 1.5,
  pin: 2222,
};

const account3 = {
  owner: 'Steven Thomas Williams',
  movements: [200, -200, 340, -300, -20, 50, 400, -460],
  interestRate: 0.7,
  pin: 3333,
};

const account4 = {
  owner: 'Sarah Smith',
  movements: [430, 1000, 700, 50, 90],
  interestRate: 1,
  pin: 4444,
};

const accounts = [account1, account2, account3, account4];

//we create a username for each account

//to create a username for each account, we need to call the userName() function one time.
userName(accounts);
const btnLogin = document.querySelector('.login__btn');

btnLogin.addEventListener('click',function(){
  const user = inputLoginUsername.value;
  const pin = inputLoginPin.value;
  const acc = accounts.find((account,i,arr)=>account.username===user);

  if(acc){
    console.log('account found');
  }else{
    console.log('account not found');
    }  
});
<form class="login">
        <input
          type="text"
          placeholder="user"
          class="login__input login__input--user"
        />
        <!-- In practice, use type="password" -->
        <input
          type="text"
          placeholder="PIN"
          maxlength="4"
          class="login__input login__input--pin"
        />
        <button class="login__btn">&rarr;</button>
      </form>

标签： javascriptconsoleaddeventlistener

解决方案

在运行上述代码时尝试打开浏览器开发工具，它给出了它不工作的原因

Uncaught ReferenceError: inputLoginUsername is not defined
    at HTMLButtonElement.<anonymous> (js:29)

您可能应该使用getElementById来获取您感兴趣的字段。您还引用了一个accounts不存在的对象。

user这是打印and值的代码pin，account除了对象数组之外，由于我不知道它是什么而被删除。

const btnLogin = document.querySelector('.login__btn');

btnLogin.addEventListener('click',function(event){
  event.preventDefault();
  const user = document.getElementById('user').value;
  const pin = document.getElementById('pin').value;
  console.log(user);
  console.log(pin);
});
<form class="login">
        <input
          id="user"
          type="text"
          placeholder="user"
          class="login__input login__input--user"
        />
        <!-- In practice, use type="password" -->
        <input
          id="pin"
          type="text"
          placeholder="PIN"
          maxlength="4"
          class="login__input login__input--pin"
        />
        <button class="login__btn">&rarr;</button>
      </form>

推荐阅读