Im trying to write a function hide one element, show other

Question

Im trying to write a function to be able to reproduce the action of hiding one element and make another appear. I know there is something in JQuery for thor that, but Im not there yet, so wanna solve it just with simple js.

const changeDisplay = (elm1, elm2) => {
     let E1 = document.getElementById('elm1').style.display = 'none'
     let E2 = document.getElementById('elm2').style.display = 'block'
     return elm1.addEventListener('click', E1) &&
     elm1.addEventListener('click', E2)
   }

   changeDisplay('not', 'ok')

TypeError: document.getElementById(...) is null script.js:6:21

What do you expect to return from this assignment: `document.getElementById('elm1').style.display = 'none'` ? — Nir Alfasi, Jul 29 '19 at 18:32
It is bad practice to use JS to style elements, use JS for functionality and toggle a CSS class to do any design changes. — , Jul 29 '19 at 18:35
`document.getElementById(...) is null` — are you sure you're finding the right elements? Reproduce your approach [in a codepen](https://codepen.io/pen/) on a simplest example. — 9000, Jul 29 '19 at 18:41
and what do you expect to be returned from `.addEventListener` && `.addEventListener`? — Scott Marcus, Jul 29 '19 at 18:42
Please always show all the relevant code. Include the HTML and CSS here. — Scott Marcus, Jul 29 '19 at 18:42

score 0 · Accepted Answer · answered Jul 29 '19 at 18:43

let E1 = document.getElementById('elm1').style.display = 'none'

This is throwing an error because the element doesn't exist, and that's because you haven't used the syntax to create a function.

You are evaluating document.getElementById('elm1').style.display = 'none' imediately and assigning the evaluated value to E1.

A function would be:

let E1 = function () { document.getElementById('elm1').style.display = 'none' };

score 0 · Answer 2 · answered Jul 29 '19 at 18:46

In your snippet you try to access elm1 and elm2 as strings, so you should remove the '. Your last line addEventListener is dubious and I don't understand what you are trying to do.

A best practice when dealing with styling changes in JS is to create CSS classes beforehand and change the class dynamically with JS. Something like that:

const changeDisplay = (elm1, elm2) => {
     const E1 = document.getElementById(elm1);
     const E2 = document.getElementById(elm2);
     E1.className = 'display_none';
     E2.className = 'display_block';
     E1.addEventListener('click', /*FUNCTION*/);
     E2.addEventListener('click', /*FUNCTION*/);
   }

   changeDisplay('not', 'ok')

Thank you all. the css and html is not the problem, and I do have the id not in the html. Thats why I didnt post it. I learned a lot from the answers, but I have to keep on studying to be able to fix it. — Mano, Jul 29 '19 at 19:12

score 0 · Answer 3 · answered Jul 29 '19 at 18:55

Try to use code like the example below to add or remove CSS classes that will hide or show your elements as you want.

window.onload = function() {
 var items = document.querySelectorAll('.item');
 for (var i=0; i < items.length; i++ ){
  items[i].addEventListener('click', function(event) {
    for (var i=0; i < items.length; i++ ){
      items[i].classList.remove("hidden");
    }
    event.target.classList.add("hidden");
   });
 }
}

.hidden { display: none; }
.item { cursor: pointer; }

<ul>
  <li class="item">Item 1</li>
  <li class="item hidden" >Item 2</li>
</ul>

Im trying to write a function hide one element, show other

3 Answers3