how to make show() and hide() without jquery for this example

  var obj = document.getElementById('add_show'); document.querySelector('#close_add').onclick = function() { obj.style.display = 'none'; }; document.querySelector('#add').onclick = function() { obj.style.display = 'block'; }; 
 .button { display: inline-block; background: green; border-radius: 2px; color: white; padding: 7px 11px; font-size: 22px; cursor: pointer; } #add_show { position: absolute; top: 50px; left: 0; width: 200px; height: 200px; background: white; border: 1px solid black; display: none; } #close_add { font-size: 25px; color: #868686; font-weight: 400; position: absolute; top: 10px; left: 8px; transform: rotate(45deg); } 
 <div class="button" id="add">Добавить <div id="add_show"> <div id="close_add">+</div> </div> </div>

  • And what should happen? - E_p
  • when you click on the add window appears, when you click on the cross in the window - to disappear - Dimka Rudnik
  • show-hide is essentially an add-delete display style: none and everything - Duck Learns to Hide
  • I wrote the code, but it does not work - Dimka Rudnik
  • 2
    Take a closer look at what items you hang up events. When you make a copy / paste, be careful. - ReinRaus 8:49 pm

2 answers 2

  var obj = document.getElementById('add_show'); document.querySelector('#close_add').onclick = function(event) { event.stopPropagation(); obj.style.display = 'none'; }; document.querySelector('#add').onclick = function() { obj.style.display = 'block'; }; 
 .button { display: inline-block; background: green; border-radius: 2px; color: white; padding: 7px 11px; font-size: 22px; cursor: pointer; } #add_show { position: absolute; top: 50px; left: 0; width: 200px; height: 200px; background: white; border: 1px solid black; display: none; } #close_add { font-size: 25px; color: #868686; font-weight: 400; position: absolute; top: 10px; left: 8px; transform: rotate(45deg); } 
 <div class="button" id="add">Добавить <div id="add_show"> <div id="close_add">+</div> </div> </div>

    2 Errors :

    1. Not on that element show.

    It was

     document.querySelector('#close_add').onclick = function() { obj.style.display = 'block'; };

    has become

     document.querySelector('#add').onclick = function() { obj.style.display = 'block'; };
    1. Incorrect nesting

    It was

     <div class="button" id="add">Добавить <div id="add_show"> <div id="close_add">+</div> </div> </div>

    has become

     <div class="button" id="add"> Добавить </div> <div id="add_show"> <div id="close_add">+</div> </div>

    As with your nesting by clicking on the cross, both actions will work.