Javascript function with same name

Question

I want o use function with same name in js, basically there is one link:

<a onClick="showjury1();" >show</a>

when the user is on desktop I want this code to be executed:

if (window.screen.width >= 1150) {
  function showjury1() {
    document.getElementById("jury1").style.display = "block";
    document.getElementById("juryline1").style.display = "none";
  }
}

and when the user is on mobile or at any other resolution I want this code to be executed:

if (window.screen.width <= 500) {
  function showjury1() {
    document.getElementById("jury1").style.display = "none";
    document.getElementById("juryline1").style.display = "block";
  }
}

Is this possible? I have executed it and it gives errors; jury1 is not defined etc.

Answer 1

Why do you need to define that function twice? Just use your conditional statement correctly

function showjury1()
{
    if(window.screen.width >= 1150)
    {
         document.getElementById("jury1").style.display = "block";
         document.getElementById("juryline1").style.display = "none";
    }
    else if(window.screen.width <= 500)
    {
        document.getElementById("jury1").style.display = "none";
        document.getElementById("juryline1").style.display = "block";
    }
    else
    {
       // might want to do something here too
    }
}

Answer 2

You can also do something like:

if(window.screen.width >= 1150){
  window.showjury1 = function(){
    ...
  }
}else{
  window.showjury1 = function(){
    ...
  }
}    

Answer 3

You can put the condition into the function, then you don't need to define the same function twice, because that isn't possible the way you want it to be.

function showjury1 {
if(window.screen.width >= 1150)
{
     document.getElementById("jury1").style.display = "block";
     document.getElementById("juryline1").style.display = "none";
}
else if(window.screen.width <= 500)
{
    document.getElementById("jury1").style.display = "none";
    document.getElementById("juryline1").style.display = "block";`
}
}

Answer 4

Instead of defining your showjury1 function inside your if statements, put your if statements inside your showjury1 function.

showjury1(){
    if(check window width){...}
    else if(check different width){....}
}

and make sure your html is loaded before your Javascript otherwise you will get a undefined error when you try to click your button that calls your function.