How do I write a javascript calculation on html for iOS browser

I wrote a simple html page with some calculations written in javascript.
The html interface works, but the calculation doesn’t. It happens only on iOS.
Could any one, please, help me to find the solution for this problem?

Unfortunately, I can’t show the entire code (it’s for my job), but the code below has the same problem.

Thank you!

Here’s the code (please, ignore the layout details):

w_a = document.getElementById("id_a");
w_b = document.getElementById("id_b");

function Reset() {

  w_a.value = "";
  w_b.value = "";

}

Reset();

function BotaoCalcular() {

  a = parseFloat(w_a.value);
  b = 2 * a;

  w_b.value = b.toFixed(3);
}

* {
  box-sizing: border-box;
}

body {
  font-size: 10px;
  font-family: Sans-Serif;
  background-color: #222;
  color: #CCC;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  text-align: right;
  background-color: #333;
  font-weight: bold;
}

@media (min-resolution: 192dpi) {
  body {
    font-size: 32px;
  }
}

div {
  padding: 1em;
  padding-top: 0;
  padding-bottom: 0;
  background-color: #333;
}

h1 {
  color: #FFF;
  font-size: 10px;
  background-color: #050;
  padding: 0.3em;
  padding-left: 0.7em;
  font-weight: bold;
}

h2 {
  color: #595;
  font-size: 10px;
  background-color: #333;
  font-weight: bold;
}

h3 {
  color: #888;
  font-size: 10px;
  text-align: right;
  background-color: #333;
}

input {
  font-weight: bold;
  border: 1px solid #777;
  font-size: 10px;
  text-align: center;
  width: 70;
}

input2 {
  color: #333;
}

label {
  display: block;
  width: 100%;
  text-align: right;
  padding: 0.2em;
  background-color: #333;
  font-weight: bold;
}

<html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Test</title>
</head>

<body>
  <h1>Teste</h1>
  <div>

    <br>

    <label><input type="text" value = "A " style = "text-align: left; background-color: #333; border: none; font-size: 10px; color: #AFA"><input type="number" id="id_a"></label>
    <label><input type="text" value = "B " disabled = "true" style = "text-align: left; background-color: #333; border: none; font-size: 10px; color: #AFA"><input type="number" id="id_b" disabled = "true"></label>

    <label><button onclick="BotaoCalcular()">Calcular</button></label>
    <label><button onclick="Reset()">Reset</button></label>
  </div>

</body>

</html>