为什么当我单击另一个div后该div仍不显示？

Question

So I'm pretty experienced with programming, but I am just getting new to Javascript. 所以我在编程方面很有经验，但是我刚接触Javascript。 I am making a new element when I click a div, but it won't work. 当我单击一个div时，我正在创建一个新元素，但是它将不起作用。 I have tried many methods, and this one seems like the simplest. 我尝试了很多方法，而这似乎是最简单的方法。 Can you help me figure out what is wrong? 您能帮我找出问题所在吗？

<!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

It appears all that's missing is to insert the string of markup, note , into the document . 似乎缺少的只是将标记字符串note插入document 。

In this case, you can use .insertAdjacentHTML() : 在这种情况下，您可以使用.insertAdjacentHTML() ：

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

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

With beforeend , it will insert the note as the content 's last child. 使用beforeend ，它将把note作为content的最后一个子项插入。

Also, the use of [0] is because getElementsByClassName() returns a collection of Elements (note the plural getElements... ). 另外，使用[0]是因为getElementsByClassName()返回Elements的集合（请注意，复数getElements... ）。

Since you've included jQuery, this could also be accomplished with jQuery(html) and .appendTo() : 由于您已经包含了jQuery，因此也可以使用jQuery(html)和.appendTo() ：

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

Answer 2

Change this: 更改此：

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

to 至

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

and 和

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

Be sure the JavaScript executes after the page has been loaded and parsed. 确保在页面加载和解析后执行JavaScript。 You should have a window.onload. 您应该有一个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