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.