"Uncaught Referenceerror: Function is not defined" DOM error

Question

my intention of this code is to open a different menu for each image I click, however this command is not happening (I will leave the whole code only as a precaution)

HTML:

<!-- imagens de background -->
    <div class="bg">
      <div class="planet">
        <img src="planetLobby.png" alt="planeta" onclick="openm1()"/>
      </div>
      <div class="buraco">
        <img src="buracoLobby.png" alt="buraco negro" onclick="openm2()"/>
      </div>
      <div class="nave">
        <img src="naveLobby.png" alt="nave" onclick="openm3()"/>
      </div>
      <div class="fenda">
        <img src="rasgoLobby.png" alt="fenda" onclick="openm4()"/>
      </div>
    </div>
    
    <!-- menu planeta -->
    <div id="menu-1">
      <div class="linkhome">
        <div class="link-1">
          <a href="#" id="l1">Coliseu</a>
        </div>
        <div class="link-2">
          <a href="#" id="l2">Forja</a>
        </div>
      </div>
    </div>
    <!-- menu buraco -->
    <div id="menu-2">
      <div class="linkhome">
        <div class="link-3">
          <a href="#" id="l3">arcos</a>
        </div>
      </div>
    </div>
    <!-- menu nave -->
    <div id="menu-3">
      <div class="linkhome">
        <div class="link-4">
          <a href="#" id="l4">casa</a>
        </div>
        <div class="link-5">
          <a href="#" id="l5">simulação</a>
        </div>
        <div class="link-6">
          <a href="#" id="l6">comércio</a>
        </div>
        <div class="link-7">
          <a href="#" id="l7">campanha</a>
        </div>
      </div>
    </div>
    <!-- menu fenda -->
    <div id="menu-4">
      <div class="linkhome">
        <div class="link-8">
          <a href="#" id="l8">invasão</a>
        </div>
      </div>
    </div>

CSS:

// Não coloquei o css inteiro, apenas as partes importantes
#menu-1, #menu-2, #menu-3, #menu-4{
  position: absolute;
  right: 0%;
  width: 0%;
  height: 100%;
  background-color: #101010dd;
  text-align: center;
  box-sizing: border-box;
  transition: 1s;
  overflow: hidden;
}

.linkhome{
  margin-top: 10%;
}


a{
  text-decoration: none;
  display: block;
  padding: 3px;
  color: white;
  background-color: #101010ff;
}

JS:

//variaveis
      var m1 = document.getElementById("menu-1");
      var m2 = document.getElementById("menu-2");
      var m3 = document.getElementById("menu-3");
      var m4 = document.getElementById("menu-4");
      //funções
    
      function openm1(){
        m1.style.width = 50%;
      }
      
      function openm2(){
        m2.style.width = 50%;
      }
      
      function openm3(){
        m3.style.width = 50%;
      }
      
      function openm4(){
        m4.style.width = 50%;
      }

I’m having as a result on my console "Uncaught Referenceerror: Function is not defined" that answer, and I don’t know much to do. Thank you for your attention :)

Notes: In case, Function is the one I squeeze

Answer 1

You need to put all 50% in quotes, like this "50%".

Functional example:

https://www.w3schools.com/code/tryit.asp?filename=GHVFEKATVQH4