Почему этот div не появится после нажатия на другой div?

Так что я довольно опытна с программированием, но я просто становлюсь новым для Javascript. Я делаю новый элемент, когда я нажимаю div, но это не сработает. Я пробовал много методов, и этот кажется самым простым. Можете ли вы помочь мне выяснить, что не так?Почему этот div не появится после нажатия на другой 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();

источник

2016-02-27 Guerinator

ПРИМЕЧАНИЕ: Javascript находится в правильном месте, вопрос был отформатирован неправильно. – Guerinator

что javascript в верхней части вашей страницы или в конце? вы получаете какие-либо ошибки в консоли? Я думаю, вы можете получить тот, который говорит: showNewNoteMenu не определен (...) ' –

Почему вы включаете jQuery, но не используете его? – user2182349

Кажется, все, что не хватает, это вставить строку разметки, note, в document.

В этом случае, вы можете использовать .insertAdjacentHTML():

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

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

С beforeend, он будет вставлять note в качестве последнего ребенка content «s.

Кроме того, использование [0] связано с тем, что getElementsByClassName() возвращает коллекцию элементов (обратите внимание на множественное число getElements...).

Поскольку вы включили JQuery, это также может быть достигнуто с jQuery(html) и .appendTo():

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

источник

2016-02-27 04:36:19

Большое вам спасибо! – Guerinator

Изменить это:

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

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

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

Убедитесь, что JavaScript выполняется после того, как страница была загружена и проанализирована. У вас должен быть window.onload.

источник

2016-02-27 04:29:39 user2182349

Будучи ненавязчивым, отделяя код от разметки, можно считать более идеальным. Но, пока функции глобальны, атрибут 'onclick' должен работать так, как ожидалось. –

«Заметка» по-прежнему не отображается на странице, какие-либо мысли для этого? – Guerinator

Вы добавляете заметку в DOM? Создание строки не добавляет ее на страницу. Вам нужно будет использовать ** document.createTextNode ** и ** document.createElement **, затем ** appendChild **. – user2182349

Почему этот div не появится после нажатия на другой div?

ответ

Смежные вопросы