Q: Condicionante numérico HTML-JavaScript Necesito crear un elemento  que se debe actualizar cada vez que se hace un cálculo en la calculadora (input). Actualizará el campo informativo cuando el usuario haga click en el botón "cuadrado". Su contenido debe ser "Info: El resultado es menor que 100", "Info: El resultado está entre 100 y 200" o "Info: El resultado es superior a 200" según sea el resultado del cálculo que muestre el input.


 function vaciar () { 
      document.getElementById("n1").value = "";
    }

  function cuadrado() { 
    let num = document.getElementById("n1");
    num.value = num.value * num.value;
  }
<!DOCTYPE html>
<html><head>
  <title>Ejemplo</title>
  <meta charset="utf-8">

</head>
<body>
  Número:
  <input type="text" id="n1" 
         onclick="vaciar()">

  <button onclick="cuadrado()">
    x<sup>2</sup> 
  </button>
 </body>
</html>



A: Puedes definir una función para armar el mensaje, por ejemplo getMensaje, que se encargue de definir el mensaje apropiado en base a una serie de if/else.
Finalmente, en la función que eleva el número al cuadrado, asignar el texto a tu elemento html llamando a dicha función:


function vaciar () { 
  document.getElementById("n1").value = "";
}

function cuadrado() { 
  let num = document.getElementById("n1");
  num.value = num.value * num.value;
  document.getElementById('mensaje').innerText = getMensaje(num.value);
}

function getMensaje(resultado){
  let mensaje;
  if (resultado < 100)
   mensaje = "el resultado es menor que 100";
  else if(resultado <= 200)
   mensaje = "el resultado esta entre 100 y 200";
  else
    mensaje = "el resultado es mayor a 200";
  return mensaje;
}
<body>
  Número:
  <input type="text" id="n1" onclick="vaciar()">
 
  <button onclick="cuadrado()">
    x<sup>2</sup> 
  </button>
  <br>
  <small id="mensaje"></small>
 </body>
</html>


Me gustaría que pongas especial atención en la secuencia de if/else, pues he dejado de lado algunas comparaciones que son innecesarias. Te pongo el código aquí con algunos comentarios adicionales:
  if (resultado < 100)
    //aquí entra si es menor a cien
    mensaje = "el resultado es menor que 100";
  else 
    //si alcanza este else, ya sabemos que no es menor que cien, 
    //no hace falta comparar si es igual o mayor que cien, porque 
    //al no ser menor, sabemos que SIEMPRE va a ser igual o mayor que cien
    //por tanto solo comparo el otro extremo
       if(resultado <= 200)
         //aquí entrará solo si, además de ser mayor o igual a cien es igual o menor a doscientos
   mensaje = "el resultado esta entre 100 y 200";
  else
    //de manera análoga, este else lo alcanzará solamente si no es menor 
    //o igual a doscientos, por tanto, ya sabemos que es mayor que doscientos
    //no hace falta ninguna otra comparación.
    mensaje = "el resultado es mayor a 200";

Pongo un énfasis especial en este tipo de construcciones, porque creo que se puede aumentar la capacidad de abstracción analizándolas y quitando las comparaciones superfluas.

A: 

function vaciar () { 
      document.getElementById("n1").value = "";
    }

function cuadrado() { 
  let num = document.getElementById("n1");
  num.value = num.value * num.value;
 
  // llamar función que muestra el mensaje
  mostrarMensaje(num.value);
}

function mostrarMensaje(resultado){
  let mensaje;
  
  // condiciones del mensaje
  if(resultado < 100)
   mensaje = " el resultado es menor que 100";
  else
  if(resultado >=100 && resultado <= 200)
   mensaje = " el resultado esta entre 100 y 200";
  else
  if(resultado > 200)
    mensaje = " el resultado es mayor a 200";

  // agregar el mensaje al elemento
  document.getElementById('mensaje').innerText = mensaje;
}
<!DOCTYPE html>
<html><head>
  <title>Ejemplo</title>
  <meta charset="utf-8">

</head>
<body>
  Número:
  <input type="text" id="n1" onclick="vaciar()">
 

  <button onclick="cuadrado()">
    x<sup>2</sup> 
  </button>
  <br>
  <small id="mensaje"></small>
 </body>
</html>


