Javascript onfocusout事件不起作用

Question

我一直在使用笔记本Web应用程序，我想进行表单验证，如果用户将（noteTitle）或（note）空着，一条消息将为他显示错误，我正在使用onfocusout事件来当用户离开输入字段时将其显示为空，但该事件对我不起作用。

这是我的代码：

const main = document.getElementById("main");
const add = document.getElementById("add"); //new note
const submit = document.getElementById("submit"); //submit the new note
const cancel = document.getElementById("cancel");
const screen = document.getElementById("screen");
const ul = document.getElementById("list");
const del = document.getElementById("delete"); 
const note = document.getElementById("note");
const back = document.getElementById("back");
const noteTitle = document.getElementById("note-title");
const inputTitle = document.getElementById("input-title");
const err1 = document.getElementById("err1");
const err2 = document.getElementById("err2");
const err3 = document.getElementById("err3");
const text = document.getElementById("text");

let flag1 = false;
let flag2 = false;
let flag3 = false;

let mynotes = {};
let i = 1;

add.addEventListener('click', function(){
    main.style.display = "block";
    submit.style.display = "inline";
    cancel.style.display = "inline";
    add.style.display = "none";
    screen.style.display = "none";
    del.style.display = "none";
    back.style.display = "none";
    inputTitle.style.display = "block"
});

noteTitle.addEventListener('onfocusout', function(){
    title = noteTitle.value;
    if (title.length < 3){
        err1.style.display = "block";
        flag1 = true;
        console.log(flag1);
    }else {
        err1.style.display = "none";
        flag1 = false;
    }

    if (mynotes.hasOwnProperty(title)){
        err3.style.display = "block";
        flag3 = true;
    } else{
        err3.style.display = "none";
        flag3 = false;
    }
});

note.addEventListener('onfocusout', function(){
    newNote= note.value;
    if (newNote === ""){
        err2.style.display = "block";
        flag2 = true;
    } else {
        err2.style.display = "none";
        flag2 = false;
    }
});

submit.addEventListener('click', function(){
    if (!flag1 && !flag2 && !flag3) {
        newNote = newNote.replace(/\n/g, "<br>");
        mynotes[title] = newNote;

        var li = document.createElement("li");
        li.setAttribute('class','item');
        li.appendChild(document.createTextNode(title));
        ul.appendChild(li);
        main.style.display = "none";
        screen.style.display = "block";
        submit.style.display = "none";
        cancel.style.display = "none";
        add.style.display = "inline";
        del.style.display = "none";
        back.style.display = "none";
        inputTitle.style.display = "none";
        note.value = "";
        noteTitle.value = "";
    } 
});



ul.addEventListener('click', function(event){
    node = event.target;
    item = event.target.textContent;
    text.innerHTML = mynotes[item];
    fullnote.style.display = "block";
    main.style.display = "none";
    submit.style.display = "none";
    add.style.display = "none";
    screen.style.display = "none";
    cancel.style.display = "none";
    del.style.display = "inline";
    back.style.display = "inline";
    inputTitle.style.display = "none";
});

del.addEventListener('click', function(){
    ul.removeChild(node);
    delete mynotes[item];
    main.style.display = "none";
    screen.style.display = "block";
    submit.style.display = "none";
    add.style.display = "inline";
    fullnote.style.display = "none";
    back.style.display = "none";
    del.style.display = "none";
    inputTitle.style.display = "none";
});

cancel.addEventListener('click', function(){
    note.value = "";
    main.style.display = "none";
    screen.style.display = "block";
    submit.style.display = "none";
    add.style.display = "inline";
    fullnote.style.display = "none";
    del.style.display = "none";
    back.style.display = "none";
    cancel.style.display = "none";
    inputTitle.style.display = "none";
});

back.addEventListener('click', function(){
    main.style.display = "none";
    screen.style.display = "block";
    submit.style.display = "none";
    add.style.display = "inline";
    fullnote.style.display = "none";
    back.style.display = "none";
    del.style.display = "none";
    inputTitle.style.display = "none";
});

#container {
    background-color: rgb(253, 248, 177);
}

#header, #footer {
    z-index: 2;
    width: 100%;
    position: fixed;
}

#footer {
  bottom: 0;
}

#screen, #input-title {
  margin-top: 2em;
} 

#title {
    color: white;
    padding-top: 7px; 
}

#cancel, #submit, #back {
    color: white;
    font-size: 20px;
}

#add {
    font-size: 20px; 
}

#delete, #cancel, #submit {
    display: none;
}

#input-title {
    display: none;
}

#main {
    display: none;
}


#note {
    resize: none;
}


#fullnote {
    display: none;
}

#back {
    display: none;
}

#err1 {
    color: red;
    font-size: 12px;
    font-weight: bold;
    display: none;
}

#err2 {
    color: red;
    font-size: 12px;
    font-weight: bold;
    display: none;
}

#err3 {
    color: red;
    font-size: 12px;
    font-weight: bold;
    display: none;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- link to css -->
    <link rel="stylesheet" href="style.css">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

    <title>Notebook</title>
  </head>
  <body>
    
    
    <div class="container-fluid min-vh-100 d-flex flex-column" id="container">

      <!-- header -->
      <div class="row align-items-start bg-info container-fluid" id="header">
        <div class="col text-center">
            <button type="button" class="btn" id="cancel">&#10007;</button>
            <button type="button" class="btn" id="back">&#8617;</button>
        </div>
        <div class="col text-center">
          <h4 id="title">Notebook</h4>
        </div>
        <div class="col text-center">
            <button type="button" class="btn" id="submit">&#10004;</button>
        </div>
      </div>
      
      <br />

      <!-- Screen list show -->
        <div class="row" id="screen">
            <div class="col-12">
                <ul id="list">
                  
                </ul>
            </div>
        </div>

        <!-- Note show -->
      <div class="row" id="fullnote">
            <div class="col-12">
            <br><br>
              <p id="text"> 
              </p>
            </div>
        </div>

      <!-- input for note title -->
      <div class="row" id="input-title">
        <div class="col">
            <input type="text" maxlength="20" class="form-control" placeholder="Note title" value="" id="note-title">
            <p id="err1">&emsp;Title must be at least 3 characters</p>
            <p id="err3">&emsp;There is a note with this title</p>
          </div>
      </div>
      <br />
      <!-- textarea for writing note -->
      <div class="row flex-grow-1">
        <div class="col" id="main">
            <textarea class="form-control textarea h-100" value="" placeholder="write note" id="note"></textarea>
            <p id="err2">&emsp;Note can not be empty</p>
          </div>
      </div>

      <br />

      
      <!-- footer -->
      <div class="row align-items-end container-fluid" id="footer">
        <div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
          <button id="add" class="btn btn-info rounded-circle"><h4 style="padding: 0px; margin: 0px;">&#x2b;</h4></button>
          <button id="delete" class="btn btn-info rounded-circle">&#128465;</button>
        </div>
      </div>
    
    </div>

    
    <script src="script.js"></script>
  </body>
</html>

谁能告诉我我的代码有什么问题？

Answer 1

onfocusout不是事件。该事件是focusout onfocusout的用法是这样

<input type="text" onfocusout='myfunc()'>

const main = document.getElementById("main");
const add = document.getElementById("add"); //new note
const submit = document.getElementById("submit"); //submit the new note
const cancel = document.getElementById("cancel");
const screen = document.getElementById("screen");
const ul = document.getElementById("list");
const del = document.getElementById("delete"); 
const note = document.getElementById("note");
const back = document.getElementById("back");
const noteTitle = document.getElementById("note-title");
const inputTitle = document.getElementById("input-title");
const err1 = document.getElementById("err1");
const err2 = document.getElementById("err2");
const err3 = document.getElementById("err3");
const text = document.getElementById("text");

let flag1 = false;
let flag2 = false;
let flag3 = false;

let mynotes = {};
let i = 1;

add.addEventListener('click', function(){
    main.style.display = "block";
    submit.style.display = "inline";
    cancel.style.display = "inline";
    add.style.display = "none";
    screen.style.display = "none";
    del.style.display = "none";
    back.style.display = "none";
    inputTitle.style.display = "block"
});

noteTitle.addEventListener('focusout', function(){
    title = noteTitle.value;
    if (title.length < 3){
        err1.style.display = "block";
        flag1 = true;
        console.log(flag1);
    }else {
        err1.style.display = "none";
        flag1 = false;
    }

    if (mynotes.hasOwnProperty(title)){
        err3.style.display = "block";
        flag3 = true;
    } else{
        err3.style.display = "none";
        flag3 = false;
    }
});

note.addEventListener('onfocusout', function(){
    newNote= note.value;
    if (newNote === ""){
        err2.style.display = "block";
        flag2 = true;
    } else {
        err2.style.display = "none";
        flag2 = false;
    }
});

submit.addEventListener('click', function(){
    if (!flag1 && !flag2 && !flag3) {
        newNote = newNote.replace(/\n/g, "<br>");
        mynotes[title] = newNote;

        var li = document.createElement("li");
        li.setAttribute('class','item');
        li.appendChild(document.createTextNode(title));
        ul.appendChild(li);
        main.style.display = "none";
        screen.style.display = "block";
        submit.style.display = "none";
        cancel.style.display = "none";
        add.style.display = "inline";
        del.style.display = "none";
        back.style.display = "none";
        inputTitle.style.display = "none";
        note.value = "";
        noteTitle.value = "";
    } 
});



ul.addEventListener('click', function(event){
    node = event.target;
    item = event.target.textContent;
    text.innerHTML = mynotes[item];
    fullnote.style.display = "block";
    main.style.display = "none";
    submit.style.display = "none";
    add.style.display = "none";
    screen.style.display = "none";
    cancel.style.display = "none";
    del.style.display = "inline";
    back.style.display = "inline";
    inputTitle.style.display = "none";
});

del.addEventListener('click', function(){
    ul.removeChild(node);
    delete mynotes[item];
    main.style.display = "none";
    screen.style.display = "block";
    submit.style.display = "none";
    add.style.display = "inline";
    fullnote.style.display = "none";
    back.style.display = "none";
    del.style.display = "none";
    inputTitle.style.display = "none";
});

cancel.addEventListener('click', function(){
    note.value = "";
    main.style.display = "none";
    screen.style.display = "block";
    submit.style.display = "none";
    add.style.display = "inline";
    fullnote.style.display = "none";
    del.style.display = "none";
    back.style.display = "none";
    cancel.style.display = "none";
    inputTitle.style.display = "none";
});

back.addEventListener('click', function(){
    main.style.display = "none";
    screen.style.display = "block";
    submit.style.display = "none";
    add.style.display = "inline";
    fullnote.style.display = "none";
    back.style.display = "none";
    del.style.display = "none";
    inputTitle.style.display = "none";
});

#container {
    background-color: rgb(253, 248, 177);
}

#header, #footer {
    z-index: 2;
    width: 100%;
    position: fixed;
}

#footer {
  bottom: 0;
}

#screen, #input-title {
  margin-top: 2em;
} 

#title {
    color: white;
    padding-top: 7px; 
}

#cancel, #submit, #back {
    color: white;
    font-size: 20px;
}

#add {
    font-size: 20px; 
}

#delete, #cancel, #submit {
    display: none;
}

#input-title {
    display: none;
}

#main {
    display: none;
}


#note {
    resize: none;
}


#fullnote {
    display: none;
}

#back {
    display: none;
}

#err1 {
    color: red;
    font-size: 12px;
    font-weight: bold;
    display: none;
}

#err2 {
    color: red;
    font-size: 12px;
    font-weight: bold;
    display: none;
}

#err3 {
    color: red;
    font-size: 12px;
    font-weight: bold;
    display: none;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- link to css -->
    <link rel="stylesheet" href="style.css">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

    <title>Notebook</title>
  </head>
  <body>
    
    
    <div class="container-fluid min-vh-100 d-flex flex-column" id="container">

      <!-- header -->
      <div class="row align-items-start bg-info container-fluid" id="header">
        <div class="col text-center">
            <button type="button" class="btn" id="cancel">&#10007;</button>
            <button type="button" class="btn" id="back">&#8617;</button>
        </div>
        <div class="col text-center">
          <h4 id="title">Notebook</h4>
        </div>
        <div class="col text-center">
            <button type="button" class="btn" id="submit">&#10004;</button>
        </div>
      </div>
      
      <br />

      <!-- Screen list show -->
        <div class="row" id="screen">
            <div class="col-12">
                <ul id="list">
                  
                </ul>
            </div>
        </div>

        <!-- Note show -->
      <div class="row" id="fullnote">
            <div class="col-12">
            <br><br>
              <p id="text"> 
              </p>
            </div>
        </div>

      <!-- input for note title -->
      <div class="row" id="input-title">
        <div class="col">
            <input type="text" maxlength="20" class="form-control" placeholder="Note title" value="" id="note-title">
            <p id="err1">&emsp;Title must be at least 3 characters</p>
            <p id="err3">&emsp;There is a note with this title</p>
          </div>
      </div>
      <br />
      <!-- textarea for writing note -->
      <div class="row flex-grow-1">
        <div class="col" id="main">
            <textarea class="form-control textarea h-100" value="" placeholder="write note" id="note"></textarea>
            <p id="err2">&emsp;Note can not be empty</p>
          </div>
      </div>

      <br />

      
      <!-- footer -->
      <div class="row align-items-end container-fluid" id="footer">
        <div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
          <button id="add" class="btn btn-info rounded-circle"><h4 style="padding: 0px; margin: 0px;">&#x2b;</h4></button>
          <button id="delete" class="btn btn-info rounded-circle">&#128465;</button>
        </div>
      </div>
    
    </div>

    
    <script src="script.js"></script>
  </body>
</html>