OmegaT UG: OS

Toggle shortcuts with a bit of javascript

by Manuel Souto Pico

HTML

<h1>OmegaT user guide</h1>

<button type="button" id="btn">Your machine: PC</button>
<hr>
<p>You can open the project settings by pressing 
  <button class="es pc" id="2" style="display: inline-block;">Ctrl + E</button>
  <button class="es mac" id="3" style="display: none;">Cmd + E</button>
</p>

CSS

body {
  max-width: 50%;
  min-width: 600px;
  margin: auto;
  padding: 50px;
}
div {
  background-color: #ebebeb;
  margin: 2px;
  padding: 5px;
}
.gender {
  font-weight: 900;
  color: red;
}
div {
  font-size: 150%;
}
h1, p {
  font-family: arial;
}

JavaScript

const mac = document.querySelector('button.mac')
const pc = document.querySelector('button.pc')
const btn = document.querySelector('#btn')
btn.addEventListener('click', e => {
  e.preventDefault();
  if (pc.style.display == "inline-block") {
    mac.style.display = "inline-block"
    pc.style.display = "none"
    btn.textContent = "Your machine: Mac"
  } else {
    mac.style.display = "none"
    pc.style.display = "inline-block"
    btn.textContent = "Your machine: PC"
  }
})