在HTML上输出文本时未出现

时间：2019-01-23 18:15:11

标签： javascript html css

我一直在使用笔记本Web应用程序，问题是如果我写笔记并保存它，当我按其标题再次阅读时，它只会显示一个空白屏幕。这是该应用程序的代码：

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"
});

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

    if (newNote === ""){
        err2.style.display = "block";
        flag2 = true;
    } else {
        err2.style.display = "none";
        flag2 = false;
    }

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

    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 min-vh-100 d-flex flex-column" id="container">

      <!-- header -->
      <div class="row align-items-start bg-info container" 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">
              <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">Title must be at least 3 characters</p>
            <p id="err3">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">Note can not be empty</p>
          </div>
      </div>

      <br />

      
      <!-- footer -->
      <div class="row align-items-end container" 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>

重新创建问题的步骤： 尝试添加便笺，将其保存，然后按其标题以阅读便笺，您将理解我的意思。

4 个答案:

答案 0 :(得分：0)

问题在于注释文本位于标题下方。 在注释文本部分添加一些空白

#fullnote {
    margin-top: 50px;
}

答案 1 :(得分：0)

它实际上按照您的预期工作。问题不在于未显示注释的全文，而是您的fullnote元素没有被下推（很可能是margin-top，而是直接将其放在{后面） {1}}格。

我强烈建议您使用Chrome开发者工具（如果您使用的是其他平台，请使用他们的开发工具）。它可以让您查看是否存在JavaScript错误，还可以在DOM结构本身中四处浏览。通过这样做，我可以看到#header，并且实际上包含了您想要的便笺文本。

答案 2 :(得分：0)

fullnote元素实际上被绿色条隐藏

将CSS更改为

#fullnote {
    margin-top: 25px;
    display: none;
}

答案 3 :(得分：0)

问题出在您的<p id="text">标记中。它隐藏在蓝色标题的后面。刚刚使用了几个<br>，现在可以看到它。

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"
});

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

    if (newNote === ""){
        err2.style.display = "block";
        flag2 = true;
    } else {
        err2.style.display = "none";
        flag2 = false;
    }

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

    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;
    console.log(mynotes[item])
    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 min-vh-100 d-flex flex-column" id="container">

      <!-- header -->
      <div class="row align-items-start bg-info container" 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">Title must be at least 3 characters</p>
            <p id="err3">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">Note can not be empty</p>
          </div>
      </div>

      <br />

      
      <!-- footer -->
      <div class="row align-items-end container" 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>

相关问题
最新问题