0

Estoy aprendiendo JS y en mi práctica no consigo hacer que me funcione la primera parte de mi script.

Tengo 3 inputs ( #ancho - #fondo - #alto ), donde escribir números enteros para una multiplicación entre ellos, seguido de una división, pero no me funciona, y ni siquiera veo nada en el div #resultado

Ejemplo: 20 x 20 x 20 / 4000

En la segunda parte quiero comparar si el valor "r=" es mayor o menor al número escrito en el input #peso, y en funcion de eso mostrar u ocultar un div, pero si no consigo que la multiplicación y división me funcione, poco podré hacer para comparar luego nada.

Qué estoy haciendo mal aquí...? Alguna pista...?


VER DEMO EN: JSFiddle


Gracias!


HTML:

<input id="ancho"> <!-- Ejemplo value="22" -->
<input id="fondo"> <!-- Ejemplo value="20" -->
<input id="alto"> <!-- Ejemplo value="16" -->

<input id="peso"> <!-- Ejemplo value="3" -->

<div id="hacercalculo" onclick="calcular();comparar()">Calcular</div>

<!--<div id="resultado"></div>-->

<div id="uno">1</div> <!-- oculto via css / display:none -->
<div id="dos">2</div> <!-- oculto via css / display:none -->
<div id="tres">3</div> <!-- oculto via css / display:none -->

jQuery:

https://code.jquery.com/jquery-2.2.4.min.js

Script:

function calcular(){
  v1 = document.getElementById("ancho").value;
  v2 = document.getElementById("fondo").value;
  v3 = document.getElementById("alto").value;
  
  r = v1*v2*v3/4000;
  
  //document.getElementById("resultado").value = r;
  document.getElementById("resultado").innerHTML = r;
};

Ahora busco la comparación para mostrar el div #uno: (no me funciona)

    function comparar() {

    var camp1= document.getElementById("resultado");
    var camp2= document.getElementById("peso");

    //if (camp1.value >= 0 && camp2.value <= 3) {
    //if (camp1.innerText >= 0 && camp2.innerText <= 3) {
    //if (camp1.innerHTML >= 0 && camp2.value <= 3) {
      
      if (camp1.innerText >= 0 && camp2.value <= 3) {

        $("#uno").show();
    }
};
14
  • 1
    Saludos. Prueba document.getElementById("resultado").innetHTML = r; el 13 jun. 2020 a las 20:18
  • 1
    No es value sino innerText para modificar el texto de una etiqueta que no sea un input como en este caso un div
    – BetaM
    el 13 jun. 2020 a las 20:20
  • Y con el cambio funcióna o que ocurre?
    – BetaM
    el 13 jun. 2020 a las 21:23
  • Muchas gracias compis, funciona de maravilla. Edité mi post ( ocultando #resultado ) para no mostrarlo, y ahora estoy buscando comparar el valor del resultado con el valor escrito en el input #peso para que si resultado <= 0 && <= 3 pueda ver ( .show ) el div #uno , y así con las siguientes comparaciones entre el resultado y el valor numerico de #peso . ¿Cómo puedo hacerlo..? Gracias!
    – Pablo_Web
    el 13 jun. 2020 a las 21:25
  • 2
    Y estás usando jQuery?
    – BetaM
    el 13 jun. 2020 a las 22:19

1 respuesta 1

0

Esta es una respuesta para mostrar que podrías hacer para dejarlo funcionando.

function calcular(){
  v1 = document.getElementById("ancho").value;
  v2 = document.getElementById("fondo").value;
  v3 = document.getElementById("alto").value;
  
  r = v1*v2*v3/4000;

  document.getElementById("resultado").innerHTML = r;
};

// Ahora (con la función "comparar"), buscamos comparar entre el resultado de la operacion de la función "calcular" y el valor numérico que el usuario escriba en el input "peso".

// Si la condición IF se cumple, mostrar el div #uno

function comparar() {

    //var camp1= document.getElementById("resultado");
    var camp1= document.getElementById("resultado");
    var camp2= document.getElementById("peso");

    //if (camp1.value >= 0 && camp2.value <= 5) {
    //if (camp1.innerHTML >= 0 && camp2.innerHTML <= 5) {
    if (camp1.innerHTML >= 0 && camp2.value <= 3) {

        $("#uno").show();
    }
};
body{text-align:center}

p{margin:15px auto}

#uno,#dos,#tres {display:none;width:50px;margin:0 auto;padding:5px 10px;background:#000;color:#fff;text-align:center}

input{display:block;margin:15px auto 5px;border:1px solid #999;background:#ff0;padding:6px 0;text-align:center}

#peso{background:#e6e6e6}

#resultado{width:130px;height:40px;margin:20px auto 5px;line-height:40px;color:#fff;background:green}

#hacercalculo {width:130px;height:40px;margin:15px auto;line-height:40px;color:#fff;background:red;cursor:pointer}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input id="ancho">
Ancho

<input id="fondo">
Fondo

<input id="alto">
Alto

<input id="peso">
Peso

<p>-----------------</p>

<div id="resultado"></div>
Resultado

<p>-----------------</p>

<div id="hacercalculo" onclick="calcular();comparar()">CALCULAR</div>

<div id="uno">1</div>
<div id="dos">2</div>
<div id="tres">3</div>

5
  • Tu script sí que funciona, pero el mío (al menos el comparador), no lo hace (el calculador sí funciona perfectamente). Es el comparador lo que me trae de cabeza. No encuentro el error de mi código, la verdad...
    – Pablo_Web
    el 13 jun. 2020 a las 23:23
  • Publiqué una DEMO de mi post en JSFiddle jsfiddle.net/rdaon2Lz
    – Pablo_Web
    el 13 jun. 2020 a las 23:57
  • @Pablo_Web en tu demo, tenes 2 errores. El primero es que nunca estas llamando a la funcion comparar() y el segundo es que en dicha funcion camp1 y camp2 son los valores finales, por lo hacer if (camp1.innerHTML >= 0 && camp2.value <= 3) es un error, deberia ser if (camp1 >= 0 && camp2 <= 3). Actualice mi respuesta para darte una posible solución
    – Marcos
    el 14 jun. 2020 a las 1:14
  • Sí, estoy puliendo errores. Como digo en el post, soy un novato (pero con ganas) ... :) ... Gracias
    – Pablo_Web
    el 14 jun. 2020 a las 1:18
  • 1
    @Pablo_Web, no hay porque sentirse mal, todos pasamos por lo mismo. Si esta respuesta solucionó tu problema, por favor no olvides marcarla como aceptada si tu problema fue resuelto. Puedes hacerlo marcando el ✓ en la parte izquierda de la respuesta (se pondrá verde, ganarás 2 puntos de reputación y podrías acceder a nuevos privilegios). ¡Mira ¿Qué debo hacer cuando alguien contesta mi pregunta? si tienes alguna duda!
    – Marcos
    el 14 jun. 2020 a las 1:19

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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