why not working function javascript resize?

Question

My code javascript not working. I want the functions work if will be over 500px width screen.

<ul>
  <li class="dawid">Dawid</li>
  <li class="piotrek">Piotr</li>
  <li class="to">Tomek</li>
</ul>

AND JAVASCRIPT CODE- NOT WORKING

document.getElementById("dawid").addEventListener("click",displaytwo);
document.getElementById("piotrek").addEventListener("click",displayone);



function displaytwo(){

                    document.getElementById("piotrek").style.display='none';
                    document.getElementById("tomek").style.display='none';
                                }

function displayone(){
                    document.getElementById("dawid").style.display='none';
                    document.getElementById("tomek").style.display='none';
          }  

RESIZE NOT WORKING

function screen_resize(){
var w = parseInt(window.innerWidth);
   if(w > 500)
   { 

     displaytwo();
     displayone();
   }}
$(window).resize(function(e) {
screen_resize();
});

$(document).ready(function(e) {
    screen_resize();
});

Answer 1

In order to use .getElementById you need ids on your elements:

<ul>
  <li class="da" id="dawid">Dawid</li>
  <li class="pi" id="piotrek">Piotr</li>
  <li class="to" id="piotrek">tomek</li>
</ul>

Answer 2

You need to declare IDs on your HTML elements, or else getElementByID() will not work.

<ul>
    <li id="dawid" class="da">Dawid</li>
    <li id="piotr" class="pi">Piotr</li>
    <li id="tomek" class="to">Tomek</li>
</ul>

It looks like you are also using jQuery and already assigned them classes, so you could also use this code to grab DOM elements by class:

$(".da").click(displaytwo);
$(".pi").click(displayone);

function displaytwo(){
    $(".piotrek").css('display','none');
    $(".tomek").css('display','none');
}

function displayone(){
    $(".dawid").css('display','none');
    $(".tomek").css('display','none');
}  

Answer 3

The ids are missing in your elements li , add the IDs:

<li class="dawid" id="dawid">Dawid</li>
<li class="piotrek" id="piotrek">Piotr</li>
<li class="to" id="tomek">Tomek</li>

 document.getElementById("dawid").addEventListener("click", displaytwo); document.getElementById("piotrek").addEventListener("click", displayone); function displaytwo() { document.getElementById("piotrek").style.display = 'none'; document.getElementById("tomek").style.display = 'none'; } function displayone() { document.getElementById("dawid").style.display = 'none'; document.getElementById("tomek").style.display = 'none'; } function screen_resize() { var w = parseInt(window.innerWidth); if (w > 500) { displaytwo(); displayone(); } } $(window).resize(function(e) { screen_resize(); }); $(document).ready(function(e) { screen_resize(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="dawid" id="dawid">Dawid</li> <li class="piotrek" id="piotrek">Piotr</li> <li class="to" id="tomek">Tomek</li> </ul>