0

Estoy muy, muy verde con JS y no encuentro una solución a mi duda con los condicionales if y else.

Tengo un botón clickME que en cada click me suma una cifra empezando por 0 y que me la muestra en el div click.

Hasta ahí todo bien, todo funciona correcto, pero lo que necesito hacer (y no me sale), es que si la cifra vale 0, se muestre el div singular, y si la cifra es mayor a 1, se muestre el div plural.

Lo que NO estoy haciendo bien está después de ( if (click == 0) ).

Esta es la parte que no me funciona, y he probado muchas variantes, pero no lo consigo.

var click=0;function clickME(){click += 1;document.getElementById("click").innerHTML=click};



if (click == 0) {
       document.getElementById("plural").style.display = "none"; 
       document.getElementById("singular").style.display = "block";
} else { 
       document.getElementById("plural").style.display = "block";
       document.getElementById("singular").style.display = "none";
}
2
  • Bienvenido a Stack Overflow en español! Mira Cómo preguntar para que tu pregunta sea mejor recibida. Tambien, aprovecha y haz el recorrido de bienvenida para entender mejor como funcionamos y de paso obtener tu primera medalla! no habras querido poner num === 0?
    – gbianchi
    Commented el 8 abr. 2019 a las 19:38
  • ¿Podrías pasarnos tú HTML también para que nos quede más fácil ayudarte? Commented el 8 abr. 2019 a las 20:28

3 respuestas 3

1

Bienvenido a Stack Overflow en español! esto fue más o menos lo que te entendí; espero te sirva.

var click=0;
function clickMe(){
  click += 1;
  document.getElementById("click").innerHTML = click;
  if (click === 1) { 
       document.getElementById("plural").style.display = "block";
       document.getElementById("singular").style.display = "none";
  };
};

if (click === 0) {
       document.getElementById("plural").style.display = "none"; 
       document.getElementById("singular").style.display = "block";
       document.getElementById("click").innerHTML = click;
}
<div id="plural">Sección Plural</div>
<div id="singular">Sección Singular</div>

<button onclick="clickMe()">Click me!</button>

<div id="click"></div>

0

Le hice algunos ajustes a tú codigo, lo que pasa es que sólo al momento de la carga verifica el estado de click cuando éste vale 0 en el siguiente click ya no pasa por verificación por lo tanto siempre muestra singular. Por defecto se visualiza singular ya que siempre inicia con 0 la variable click;

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
            <title>
               Prueba Click
            </title>
            </script>
        </meta>
    </head>
    <body>
        <div class="container text-center">
            <button id="clickButton" onclick="clickME()" type="button">
                Presiona click
            </button>
            <div id="texto">Singular</div>
            <div id="click"></p>
        </div>
        <script>
            var click=0;
            function clickME(){
            	click += 1;
            document.getElementById("click").innerHTML=click;
            //Verifica el div a mostrar
            checkClick();
        };


		function checkClick() {
			if (click == 0) {
			    document.getElementById("texto").textContent = "Singular";
			} else { 
			     document.getElementById("texto").textContent = "Plural";
			}
		}
        </script>
    </body>
</html>

3
  • Yo no dejaría el style="display: none"en el HTML, es una mala práctica en desarrollo. Commented el 8 abr. 2019 a las 20:42
  • Se veria mejor si en lugar de plural-singular, fuese par-impar, asi irian mostrando y ocultando continuamente los dos divs. Commented el 8 abr. 2019 a las 20:45
  • 1
    Le realice algunos ajustes para evitar el uso de display, lo de para e impar no estaría mal, pero para evitar confusiones hice las correcciones en base a su pregunta. Saludos
    – cjara
    Commented el 8 abr. 2019 a las 21:00
0

Creo que la estructura que se plantea es clara, se tiene que cargar la página web con una configuración inicial para los divs, otra que debería mantener los divs cuando se incrementa la variable a uno y luego está el caso cuando ya se trata con cifras de dos en adelante, para el plural.

A efecto de reutilizar código, se puede emplear una función de ayuda actualizar_Div, para que sea llamada de acuerdo a la casuística antes expuesta:

function actualizar_Div(act_plural, act_singular, msg=""){
  document.getElementById("plural").style.display = act_plural; 
  document.getElementById("singular").style.display = act_singular;
  document.getElementById("click").innerHTML = msg + click;
};

En tal sentido, el tercer parámetro es opcional porque este mensaje se concadena con la variable click, a efecto de indicar Es 0, Es 1, Son 2, Son 3, etc. si es que se requiere, esto como indiqué permite luego facilitar el mantenimiento del código. Por tanto, el código con sus respectivos comentarios quedaría así

<html>
<body>

<div id="plural">.:Plural:.</div>
<div id="singular">.:Singular:.</div>

<button onclick="clickMe()">Click me!</button>

<div id="click"></div>

<script>

// Esta funcion actualizara la informacion de los div
// plural, singular y click dependiendo el caso donde se esta
function actualizar_Div(act_plural, act_singular, msg=""){
  document.getElementById("plural").style.display = act_plural; 
  document.getElementById("singular").style.display = act_singular;
  document.getElementById("click").innerHTML = msg + click;
};

// funcion para incrementar con el boton clickMe
var click = 0;						// Se Inicializa la variable click
function clickMe(){
  click += 1;						// Se incrementa la variable click
  
  if (click > 1) { 
  		actualizar_Div("block", "none", "Son: ")	// Plural
  } else { 
  		actualizar_Div("none", "block", "Es: ")		// Singular
  };				
};

// Esta es la configuración inicial con la que se carga la página web
actualizar_Div("none", "block", "Es: ")

</script>

</body>
</html>

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.