Fatal编程技术网
  • javascript/
  • Javascript 为什么赢了'；单击另一个div后，是否显示此div？

Javascript 为什么赢了'；单击另一个div后，是否显示此div？

javascript jquery html

Javascript 为什么赢了'；单击另一个div后，是否显示此div？,javascript,jquery,html,Javascript,Jquery,Html,所以我对编程很有经验，但我刚刚开始接触Javascript。当我单击一个div时，我正在创建一个新元素，但它不起作用。我尝试过很多方法，这一种似乎是最简单的。你能帮我找出什么毛病吗 <!doctype html> <html> <head> <link type="text/css" rel='stylesheet' href='style.css'/> <meta charset="UTF-8">

所以我对编程很有经验，但我刚刚开始接触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>


软木塞
+




写新笔记

函数showNewNoteMenu（）{
document.getElementById（“newNoteMenu”）.style.display=“内联块”；
};
函数hideNewNoteMenu（）{
document.getElementById（“newNoteMenu”）.style.display=“无”；
};
函数createNewNote（）{
document.getElementsByTagName（“h1”）.innerHTML=“这很有效”
警报（“正常”）；
var title=document.getElementById（“title”）.value；
var text=document.getElementById（“详细信息”）.value；
变量日期=新日期（）；
var hours=date.getHours（）；
var minutes=date.getMinutes（）；
var时间=小时+“：”+分钟；
var content=document.getElementsByClassName（“内容”）；
变量注释=''+title+''+time+''+text+'
'；
}
hideNewNoteMenu（）；
更改此选项：

<div id="addNote" onclick="showNewNoteMenu()">+</div>
确保JavaScript在页面加载和解析后执行。您应该有一个window.onload。

似乎缺少的只是将标记字符串
note
插入
文档中

在这种情况下，您可以使用：

在
结束之前
，它将插入
注释
，作为
内容
的最后一个子项

另外，之所以使用
[0]
，是因为
getElementsByClassName（）
返回元素的集合（注意复数
getElements…
）



由于您已经包括了jQuery，这也可以通过和来实现：


注意：javascript在正确的位置，问题的格式错误。javascript是在页面的顶部还是结尾？控制台中是否有任何错误？我想您可能会看到这样一个消息，即未定义showNewNoteMenu（…）
为什么包括jQuery但不使用它？不引人注目，将代码与标记分离，可能会被认为更理想。但是，只要函数是全局函数，
onclick
属性就应该像预期的那样工作。“注释”仍然不会显示在页面上，对此有什么想法吗？是否将注释添加到DOM中？创建字符串不会将其添加到页面中。您需要使用document.createTextNode和document.createElement，然后使用appendChild。 
<div id="addNote" onclick="showNewNoteMenu()">+</div>

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

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

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

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

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