0

Estoy intentando resolver el siguiente ejercicio:

  • Crear web con un input de tipo numérico que pida notas y dos botones “Añadir” y “Mostrar”.
  • Al pulsar "añadir" se añadirá el contenido a un array vacío previamente creado.
  • Al pulsar "mostrar" se mostrarán las notas, una por línea. Las inferiores a 5 en color rojo y las iguales/superiores a 5 en color verde.

Con el código que adjunto, me saca si el valor que introduzco es menor a 5 - true en color rojo. Si es igual o mayor - true en color verde.

No me saca los valores en sí (4.1 o 5,2, por ejemplo). Ni me los lista, sólo aparece un true en un color o en otro.

Gracias de antemano por la ayuda.

<body>

    <form name="cuarto" method="post">
        <label for="notas">Escribe un texto:</label><br>
        <input type="number" id="notas" name="notas" placeholder="¿NOTA?" min="0" max="10" step=".01"><br>

        <button type="button" onclick="añadir()">AÑADIR</button>

        <button type="button" onclick="mostrar()">MOSTRAR</button>

        <p id="demo"></p>

    </form>

    <script>

        var arraynotas = [];


        function añadir(){
            let nota = document.getElementById('notas').value.split(" ");
            arraynotas = arraynotas.concat(nota);
            document.getElementById('notas').value = "";
            } 

        function mostrar(){
            if (document.getElementById("demo").innerHTML = arraynotas.join("<br>")<5) {
                document.getElementById("demo").style.color = "red";
            } else if (document.getElementById("demo").innerHTML = arraynotas.join("<br>")>=5) {
                document.getElementById("demo").style.color = "green";
            } 

        }


    </script>


</body>

1 respuesta 1

1

if (document.getElementById("demo").innerHTML = arraynotas.join("<br>")<5){}

Tienes que entender que cuando se ejecuta el if de arriba ocurren 2 cosas:

  1. Primero se evalua la expresión arraynotas.join("<br>") < 5 si esta expresión se cumple su valor (true o false) se asignará a document.getElementById("demo").innerHTML.
  2. Luego de asignar dicho valor al elemento demo se evalua la condición if que quedaría así if(document.getElementById("demo").innerHTML) y esta condición será cierta o falsa dependiendo del valor que se ha asigando previamente.

Por eso el contenido de document.getElementById("demo").innerHTML es true o false debido a la asignación que se hace luego de evaluar arraynotas.join("<br>") < 5.

Para listar todas las notas tienes que recorrer el arraynotas y crear el html para insertarlo en elemento demo. Puedes usar el metodo map para generar los elementos y concatenarlos con join.

 var arraynotas = [];


 function añadir() {
   let nota = document.getElementById('notas').value.split(" ");
   arraynotas = arraynotas.concat(nota);
   document.getElementById('notas').value = "";
 }

 function mostrar() {
   const html = arraynotas.map((nota) => 
     `<span style="color: ${nota >= 5 ? 'green' : 'red'}">${nota}</span><br>`
   ).join('');
   document.getElementById("demo").innerHTML = html;

 }
<form name="cuarto" method="post">
        <label for="notas">Escribe un texto:</label><br>
        <input type="number" id="notas" name="notas" placeholder="¿NOTA?" min="0" max="10" step=".01"><br>

        <button type="button" onclick="añadir()">AÑADIR</button>

        <button type="button" onclick="mostrar()">MOSTRAR</button>

        <p id="demo"></p>

    </form>

2
  • Muchas gracias. ¿Se podría hacer utilizando...? document.getElementById("formato").style.color="red" el 29 abr. 2020 a las 19:27
  • de nada. No entiendo tu duda. Pero si tienes un elemento en DOM(html) que tenga por id="formato" puedes cambiar los estilos.
    – hawks
    el 29 abr. 2020 a las 19:45

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.