This question has already been answered:

I iterate over the array and create an element. An item is added to the page, but its content is not visible. And in the console, the content is written

enter image description here

But on the page itself is not visible. Tell me why?

var notes = []; var tcor = 0; var lcor = 0; var indicator = 0; var addfirstlevel = document.getElementById('addfirstlevel').onclick = addfirstlevel; function addfirstlevel(){ var dialog = document.getElementById('dialog'); dialog.showModal(); var date = document.getElementById('date'); var time = document.getElementById('time'); var dateObj = new Date(); date.value = dateObj.toISOString().slice(0,10) time.value = dateObj.getHours() + ':' + dateObj.getMinutes(); } var add = document.getElementById('add').onclick = add; function add (){ var header = document.getElementById('header'); var notetext = document.getElementById('note-text'); var date = document.getElementById('date'); var time = document.getElementById('time'); function far () { console.log("aga"); } function addmain(){ notes.map(item, index, ) } if (header.value === "" || notetext.value === "") { var message = document.getElementById('fail'); message.style.display = "block"; }else { tcor+=10; lcor+=10; indicator+=1; var obg = { id: indicator, header: header.value, date: date.value, time: time.value, notetext: notetext.value, left: lcor, top: tcor }; notes.push(obg); notes.forEach(function(item){ var main = document.getElementById("main"); var one = document.createElement("div"); var two = document.createElement("p"); var tree = document.createElement("p"); var four = document.createElement("p"); var five = document.createElement("p"); one.className = "note"; one.style.left = item.left + "px"; one.style.top = item.top + "px"; two.className = "item-of-note"; tree.className = "item-of-note"; four.className = "item-of-note"; five.className = "item-of-note"; two.textContent = "item.header"; tree.textContent = item.date; four.textContent = item.time; five.textContent = item.notetext; one.appendChild(two); one.appendChild(tree); one.appendChild(four); one.appendChild(five); one.onclick = far; main.appendChild(one); }) dialog.close(); } } 
 #main { width: 100%; height: 900px; background-color: #ecbb32; position: relative; } #addfirstlevel { width:40px; height:40px; float:right; margin: 20px 20px 20px 20px; background: green; border-radius: 2px; } .plus { background: white; height: 20px; width: 6px; position: relative; left: 17px; top: 10px; } .plus:after { content: ""; height: 6px; width: 20px; background: white; position: absolute; left: -7px; top: 7px; } .form { display: flex; flex-direction: column; } .note { width:300px; height:300px; position: absolute; background: #fdfb35; } .item-of-note { margin-top: 5px; font-family: 'Indie Flower', cursive; font-size: 10px; } input { margin-bottom: 30px; } button { margin-top: 30px; border-radius: 10px; background: green; font-family: 'Indie Flower', cursive; } dialog::backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8); } p { display: none; font-size: 30px; font-family: 'Indie Flower', cursive; color: red; } 
 <div id="main"> <div id="addfirstlevel"> <div class="plus"></div> </div> <dialog id="dialog"> <div class="form"> <input id="header" maxlength="20" placeholder="Заголовок" type="text"> <input id="date" type="date"> <input id="time" type="time"> <textarea id="note-text" placeholder="Текст заметки" maxlength="44"></textarea> <button id="add">Добавить</button> </div> <p>Заметка размещена</p> <p id="fail">Проверьте<br>данные</p> </dialog> </div>

Reported as a duplicate by participants andreymal , Qwertiy ♦ javascript Jan 16 '18 at 6:25 pm

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • Your code completely works for me and everything is visible, it means that you are not agreeing something - andreymal
  • Added all the code. I make a study project notes, there is a cross click and it adds - Sinevik
  • This is absolutely not all the code, because there is at least no html element with the id main and there is no variable notes . Add a minimal, self-sufficient and reproducible example so that we can run it in our home and see your problem, otherwise you will not be helped here. - andreymal
  • Oh kinda added - Sinevik
  • p { display: none is written in your CSS in plain text - that is, hide all <p> elements. Therefore, it is not visible - andreymal

1 answer 1

In devtools it was necessary to look:

screenshot