Question

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

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>

Answer 1

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

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

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

这是打印 user 和 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>

Answer 2

这应该有效。

let form = document.getElementsByClassName("login");
function handleForm(event) { event.preventDefault(); } 
form.addEventListener('submit', handleForm);

Answer 3

如果你使用谷歌浏览器，当然还有其他浏览器，在开发者窗口（那里有检查器、控制台等），你有一个“源”标签。在那里，您可以放置一些断点。为 Google Chrome 选择 this website，为 Mozilla Firefox 选择 this one。

因此，您可以在页面重新加载之前停止代码的执行。

Answer 4

类型调试器；在您想要开始调试的代码中，并确保在浏览器的开发人员工具中您已启用调试。

debugger;

检查此链接以供参考。

向按钮添加事件侦听器时如何调试

4 个答案: