為什么當我單擊另一個div后該div仍不顯示？

Question

所以我在編程方面很有經驗，但是我剛接觸Javascript。 當我單擊一個div時，我正在創建一個新元素，但是它將不起作用。 我嘗試了很多方法，而這似乎是最簡單的方法。 您能幫我找出問題所在嗎？

<!doctype html>
<html>
    <head>
        <link type="text/css" rel='stylesheet' href='style.css'/>
        <meta charset="UTF-8">

    </head>
    <body>
        <div class="head">
            <h1>Corkboard</h1>
            <div id="addNote" onclick="showNewNoteMenu()">+</div>
        </div>

        <div id = "newNoteMenu">
            <div class="container">
                <input id="title" type="text" placeholder="Title" name="Title"/> <br />
                <textarea id="details" cols=22.5 rows=5></textarea> <br />
                <div onclick="createNewNote()" id='submitNewNote'>Make New Note</div>
            </div>
        </div>

        <div class="content" onclick="hideNewNoteMenu()">

        </div>
    </body>

    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="script.js"></script>
</html>

    function showNewNoteMenu() {
        document.getElementById("newNoteMenu").style.display = "inline-block";
    };

    function hideNewNoteMenu() {
        document.getElementById("newNoteMenu").style.display = "none";
    };

    function createNewNote() {
        document.getElementsByTagName("h1").innerHTML = "This works"
        alert("OK");
        var title = document.getElementById("title").value;
        var text = document.getElementById("details").value;
        var date = new Date();
            var hours = date.getHours();
            var minutes = date.getMinutes();
        var time = hours + ":" + minutes;
        var content = document.getElementsByClassName("content");

        var note = '<div class="note"><div class="container"><h2>'+ title + '</h2><i>' + time + '</i><p>' + text + '</p></div></div>';


    }

    hideNewNoteMenu();

Answer 1

似乎缺少的只是將標記字符串note插入document 。

在這種情況下，您可以使用.insertAdjacentHTML() ：

var content = document.getElementsByClassName("content");
var note = /* ... */;

content[0].insertAdjacentHTML('beforeend', note);

使用beforeend ，它將把note作為content的最后一個子項插入。

另外，使用[0]是因為getElementsByClassName()返回Elements的集合（請注意，復數getElements... ）。

由於您已經包含了jQuery，因此也可以使用jQuery(html)和.appendTo() ：

$(note).appendTo(content[0]);

Answer 2

更改此：

<div id="addNote" onclick="showNewNoteMenu()">+</div>

至

<div id="addNote">+</div>

和

document.getElementById("addNode").addEventListener("click",showNewNoteMenu);

確保在頁面加載和解析后執行JavaScript。 您應該有一個window.onload。

為什么當我單擊另一個div后該div仍不顯示？

問題描述

2 個解決方案

解決方案1
1 已采納 2016-02-27 04:36:19

解決方案2
0 2016-02-27 04:29:39

為什么當我單擊另一個div后該div仍不顯示？

問題描述

2 個解決方案

解決方案1 1 已采納 2016-02-27 04:36:19

解決方案2 0 2016-02-27 04:29:39

解決方案1
1 已采納 2016-02-27 04:36:19

解決方案2
0 2016-02-27 04:29:39