Perform 2 different functions in a javascript onclick event

Your code is fine ... or almost. It is simpler than some of the proposed solutions and all you have to do is correct a very simple error. If you notice, in the comparison to determine in which position is the element #work2 instead of checking the position of #work2 , you check the position of #flecha_work ! :

    // aquí deberías estar comprobando work2
    if(flechaWork.style.left=="50%"){
        work.style.left="-60%";
        work.style.transition = "all 1.3s";
    }
    else{
        work.style.left="50%";
        work.style.transition = "all 1.3s";
    }

Since then in the code what you change is the #work2 style, the condition will always go by the else and that's why you do not see the actions alternate .

The solution: change the condition so that the position of #work2 is checked:

    if(work2.style.left=="50%"){

And then the actions already alternate without problems:

window.addEventListener("load",function(){
    var flechaWork=document.getElementById('flecha_work');
    var work=document.getElementById("work2");
    flechaWork.addEventListener("click",function(){
        if(work.style.left=="50%"){
            work.style.left="-60%";
            work.style.transition = "all 1.3s";
        }
        else{
            work.style.left="50%";
            work.style.transition = "all 1.3s";
        }
    })
})

#work2 {
  position:absolute;
  top:100px;
  left:-60%;
  width:100px;
  height:200px;
  color:white;
  background:black;
}

<button id="flecha_work">Pulsame, soy flecha_work</button>
<div id="work2">
Soy Work2
</div>

I understand you want to make a kind of flip flop between the two actions, if so you could attach a function or another to the event adding it or removing it.

window.addEventListener("load",function(){
    var work=document.getElementById("work2");

    var flechaWork=document.getElementById('flecha_work');
    flechaWork.addEventListener("click",flecha1);
});

function flecha1(){
    work.style.left="-60%";
    work.style.transition = "all 1.3s";

    var flechaWork=document.getElementById('flecha_work');
    flechaWork.removeEventListener("click", flecha1);
    flechaWork.addEventListener("click",flecha2);
}

function flecha2(){
    work.style.left="50%";
    work.style.transition = "all 1.3s";

    var flechaWork=document.getElementById('flecha_work');
    flechaWork.removeEventListener("click", flecha2);
    flechaWork.addEventListener("click",flecha1);
}

Yes, but it's actually easier than the function you wrote.

<button onClick="ejecutar_dos_funciones()" >Ejecutar</button>

<script>

function ejecutar_dos_funciones()
{
  funcion_uno();
  funcion_dos();
}

function funcion_uno()
{
 alert("funcion uno");
}

function funcion_dos()
{
 alert("funcion dos");
}

</script>

Maybe you'll get a toggle () event

<div id="target">
  Click aquí
</div>

$( "#target" ).toggle(function() {
    alert( "Probando acción 1" );
 }, function() {
    alert( "Probando acción 2" );
 });

Obviously you have to change the alerts for the functions you want. Now, a little more current would be like this.

$( "#target" ).toggle( display );

if ( display === true ) {
  $( "#target" ).show();
} else if ( display === false ) {
  $( "#target" ).hide();
}

You can see the documentation and examples here: link I hope it helps you in something. Greetings.

You can make a hidden field that has the initial value 0 and then in the function you call with the onclick you can check that value. If it is to zero you do one of the actions and the value of the field is hidden to 1. And if it is 1 you make the other option and you set the value of the hidden field to 0. So you can alternate it