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>