0

estoy haciendo una calculadora en html, javascript y tengo un problema al momento de hacer los cálculos en móvil, en escritorio está todo bien, pero en móvil me pasa que se borran, o sea, los muestra, pero se borran al momento, he intentado de todo y no he podido solucionar hasta ahora, espero puedan ayudarme, este es el código:

En la PC me muestra bien los datos en las estructuras, pero cuando me voy al teléfono empiezan los problemas porque los datos aparecen, pero se borran al instante, no consigo aún la falla del error.

   
    function calculate(event) {
      event.preventDefault(); // Evita que el formulario se envíe y la página se actualice
      var results = obtenerResultados();

      // Muestra los resultados en los contenedores correspondientes y en los campos respectivos
      mostrarResultados(results);
      
       return false;
    }

    function obtenerResultados() {
      // Realiza los cálculos y retorna un objeto con los resultados
      var wallHeight = parseFloat(document.getElementById('wallHeight').value);
      var wallWidth = parseFloat(document.getElementById('wallWidth').value);
      var rollLength = parseFloat(document.getElementById('rollLength').value);
      var rollWidth = parseFloat(document.getElementById('rollWidth').value);
      var verticalRepeat = parseFloat(document.getElementById('verticalRepeat').value);

      var repeatsPerRoll = Math.floor((rollLength * 36) / verticalRepeat);
      var repeatsPerStrip = Math.ceil((wallHeight + 4) / verticalRepeat);
      var stripHeight = Math.ceil(repeatsPerStrip * verticalRepeat);
      var stripsPerRoll = Math.floor(rollLength * 36 / stripHeight);
      var extraRepeatsPerRoll = Math.floor(((rollLength * 36) - (stripHeight * stripsPerRoll)) / verticalRepeat);
      var stripsRequired = Math.ceil(wallWidth / rollWidth);

      var exactBolts = Math.ceil(stripsRequired / stripsPerRoll);
      var stripsExtra = Math.floor((exactBolts * stripsPerRoll) - stripsRequired);

      return {
        repeatsPerRoll: repeatsPerRoll,
        stripHeight: stripHeight,
        repeatsPerStrip: repeatsPerStrip,
        stripsPerRoll: stripsPerRoll,
        extraRepeatsPerRoll: extraRepeatsPerRoll,
        stripsRequired: stripsRequired,
        exactBolts: exactBolts,
        stripsExtra: stripsExtra
      };
    }

    function mostrarResultados(results) {
      // Muestra los resultados en los contenedores correspondientes
      document.getElementById('repeatsPerRoll').textContent = results.repeatsPerRoll;
      document.getElementById('stripHeight').textContent = results.stripHeight;
      document.getElementById('repeatsPerStrip').textContent = results.repeatsPerStrip;
      document.getElementById('stripsPerRoll').textContent = results.stripsPerRoll;
      document.getElementById('extraRepeatsPerRoll').textContent = results.extraRepeatsPerRoll;
      document.getElementById('stripsRequired').textContent = results.stripsRequired;

      document.getElementById('exactBolts').textContent = results.exactBolts;
      document.getElementById('stripsExtra').textContent = results.stripsExtra;      
           

      // Muestra el contenedor de resultados
      document.getElementById('results').style.display = 'block';
      document.getElementById('resultsByBolts').style.display = 'block';
    }
   var inputFields = document.querySelectorAll('input, select');
inputFields.forEach(function(input) {
  input.addEventListener('focus', function() {
    mostrarResultados(obtenerResultados());
  });
});
label {font-size:20px !important;
  font-family: roboto, sans-serif;
padding-left: 7% !important;
   padding: 2% 5% 4% 7% !important;
  display:block !important;}
  
  .title-results {
    display: block;
    font-family: roboto, sans-serif;
    padding: 2% 0% 2% 0% !important; !important;
    margin: 10px 0 !important;
  font-size:18px !important;
}
  
  .results-column{
display: block;
  width:90%;
  margin: 0 auto;}
  
.container {
  width:100%;
  background-color:#ffffff;
    display: flex;
  flex-direction: column;
    margin:0 auto;
}
.calculator {
    display: flex !important;
    flex-direction: column !important;
    padding-left: 0% !important;
    padding-top: 0%;
    width: 95% !important;
    justify-content: center;
}
  
  .results h2 {
  font-family: roboto, sans-serif;
   padding-top: 10%;
    text-align: center !important;
  display:block !important;
}
  
  .titulo{font-family: roboto, sans-serif;
text-align: center !important;
  display:block !important; 
  padding-top: 8%;
  padding-bottom: 6%;}
  
  .results {
  justify-content:center !important;
  background-color:#FAFAFA;
    width: 100% !important;
    display:flex;
    flex-direction: column;
    padding-left: 0% !important;

}
  
  .input-results{border:1px solid #CFCFCF;
  display: block;
    margin: 0 auto;
width:90% !important;
height:60px;
border-radius:30px;
background-color:#CFCFCF;
padding-left:7% !important;
    padding-top:5% !important;
margin-top:3%;
  font-family: roboto, sans-serif;
font-size:18px;}
  
  br{display:none;}
  
  input {
  padding-left:7% !important;
  height:50px;
  width:80% !important;
  border-radius:30px;
    display: block;
    margin: 0 auto !important;
    margin-top: 0% !important;
  border:1px solid #CFCFCF;
  font-family:  font-family: roboto, sans-serif;
  font-size:20px !important;
}
  
  select{ 
   padding-left:4%;
  height:40px;
  width:18%;
  border-radius:25px;
    display: block;
    margin-top: -1% !important;
    margin-left: 10% !important;
  border:1px solid #CFCFCF;
  font-family: roboto, sans-serif;
font-size:20px !important;}

  .btn{border-radius:5px;
  margin-top:7% !important;
    margin-bottom: 7% !important;
border: none;
background-color:#000000;
color:#ffffff;
height:50px;
font-size:16px;
    display: block;
    margin: 0 auto;
width:50%;}
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wallpaper Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container1">
    <div class="calculator">
      <label for="wallHeight">Exact Height of wall <span class="inches">inches</span></label>
      <input type="number" id="wallHeight" required>
      <label for="wallWidth">Exact Total Width of wall/s <span class="inches">inches</span></label>
      <input type="number" id="wallWidth" required>
      <h2 class="titulo">Wallpaper Specs</h2>
      <label for="rollLength">Roll Length <span class="inches">yards</span></label>
      <input type="number" id="rollLength" required>
      <label for="rollWidth">Roll Width <span class="inches">inches</span></label>
      <select id="rollWidth">
        <option value="20">20</option>
        <option value="27">27</option>
        <option value="36">36</option>
        <option value="54">54</option>
      </select>
      <label for="verticalRepeat">Vertical Repeat <span class="inches">inches</span></label>
      <input type="number" id="verticalRepeat" required>
  </div>
   <div> <button type="button" onclick="calculate(event)" class="btn">SEE RESULTS</button>
  </div>
    </div>
  </div>
  <div class="results">
    <h2>Results</h2>
    <div id="results">
      <div class="results-column"><p class="title-results">Number of repeats per roll</p> <span id="repeatsPerRoll" class="input-results" required/></span></div>
      <div class="results-column"><p class="title-results">Strip Height [inches]</p> <span id="stripHeight" class="input-results" required/></span></div>
      <div class="results-column"><p class="title-results">Number of repeats per strip</p> <span id="repeatsPerStrip" class="input-results"></span></div>
      <div class="results-column"> <p class="title-results">Number of strips per roll</p> <span id="stripsPerRoll" class="input-results"></span></div>
      <div class="results-column"> <p class="title-results">Number of extra repeats per roll</p> <span id="extraRepeatsPerRoll" class="input-results"></span></div>
      <div class="results-column"><p class="title-results">Number of strips required</p> <span id="stripsRequired" class="input-results"></span></div>
    </div>
    <h2 class="rbb">Results by bolts</h2>
    <div id="resultsByBolts">
      <div class="results-column"> <p class="title-results">Number of exacts Bolts</p> <span id="exactBolts" class="input-results"></span></div>
      <div class="results-column">   <p class="title-results">Number of strips extra</p><span id="stripsExtra" class="input-results"></span></div>
    </div>
  </div>
</body>

El problema viene en que en móvil los resultados se desaparecen cuando se le da click al botón, he intentado de todo, pero no encuentro el problema, solo quisiera que se queden ahí sin problema y que se cambien si se actualiza la calculadora, gracias de antemano por su ayuda.

2
  • En mi movil funciona bien. ¿Que navegador usas en tu movil?
    – Juan_m_2
    Commented el 20 mar. a las 18:06
  • Uso Google Chrome, pero cuando bajo el teclado para ver los datos, se borran, no sé por qué ocurrre esto, deberían verse siempre no? Pero no encuentro una solución. Commented el 20 mar. a las 18:42

1 respuesta 1

0

al final del día, lo que hice fue crear una function y en vez de aplicar variables, las dejé como constantes y funcionó perfecto, ya todos los campos se ven sin mayores problemas, por si les funciona para futuros proyectos con este detalle.

1
  • Hace falta una explicación clara de cuál era el problema o como lo resolviste, indicar dónde estaba el problema en el código o incluir el código resuelve el problema planteado por la pregunta. Aún si respondes tu propia pregunta, estás respondiendo a la comunidad y especialmente a los futuros visitantes de este hilo. Para más información lee Cómo responder.
    – jachguate
    Commented el 12 jun. a las 6:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.