javascript - 无法获取过滤结果的功能

问题描述

我正在尝试使用过滤器记录医院患者。我正在尝试按年龄过滤和按疾病过滤。但我不能让过滤器工作。我做了这段代码，但我看不出错误在哪里。控制台日志不显示错误，但是当我更改过滤器参数并单击搜索时它不起作用。

const pacientes = new Array(
    {
        nombre: "Luis",
        apellido: "Ramirez",
        edad: 27,
        diagnostico: "gripe",
        numeroSS: "A12340"
    },
    {
        nombre: "Pablo",
        apellido: "Perez",
        edad: 17,
        diagnostico: "torcedura",
        numeroSS: "A22345"
    },
    {
        nombre: "Antonio",
        apellido: "Ruiz",
        edad: 14,
        diagnostico: "conjuntivitis",
        numeroSS: "A32345"
    },
    {
        nombre: "Pedro",
        apellido: "Perez",
        edad: 37,
        diagnostico: "torcedura",
        numeroSS: "A42310"
    },
    {
        nombre: "Juan Luis",
        apellido: "Valera",
        edad: 36,
        diagnostico: "tuberculosis",
        numeroSS: "A52345"
    },
    {
        nombre: "Domingo",
        apellido: "Córcoles",
        edad: 40,
        diagnostico: "asma",
        numeroSS: "A62345"
    },
    {
        nombre: "Luis Alberto",
        apellido: "García",
        edad: 41,
        diagnostico: "conjuntivitis",
        numeroSS: "A72345"
    },
    {
        nombre: "Juan",
        apellido: "Martínez",
        edad: 22,
        diagnostico: "gripe",
        numeroSS: "A82360"
    },
    {
        nombre: "Juan",
        apellido: "Bernal",
        edad: 25,
        diagnostico: "asma",
        numeroSS: "A92347"
    },
    {
        nombre: "Jose María",
        apellido: "Spiteri",
        edad: 39,
        diagnostico: "obesidad morbida",
        numeroSS: "A10346"
    },
    {
        nombre: "Angel",
        apellido: "García",
        edad: 37,
        diagnostico: "gripe",
        numeroSS: "A11345"
    },
    {
        nombre: "Bernardo",
        apellido: "Gonzalez",
        edad: 55,
        diagnostico: "faringitis",
        numeroSS: "A12240"
    },
    {
        nombre: "Pascual",
        apellido: "Verdú",
        edad: 33,
        diagnostico: "arritmia ventricular",
        numeroSS: "A13347"
    },
    {
        nombre: "Fernando",
        apellido: "Calderón",
        edad: 48,
        diagnostico: "hepatitis",
        numeroSS: "A14345"
    },
    {
        nombre: "Agustín",
        apellido: "Carrión",
        edad: 19,
        diagnostico: "gripe",
        numeroSS: "A15347"
    },
    {
        nombre: "Arde",
        apellido: "a Secas",
        edad: 30,
        diagnostico: "gonorrea",
        numeroSS: "A5432"
    },
    {
        nombre: "Pedro",
        apellido: "Martinez",
        edad: 37,
        diagnostico: "covid19",
        numeroSS: "A45678"
    },
);


function filtrarXEdad(pListaPacientes, pEdadMinima, pEdadMaxima) {
    const listaFiltrada = pListaPacientes.filter(paciente => {
        return paciente.edad >= pEdadMinima && paciente.edad <= pEdadMaxima
    });
    return listaFiltrada;
}



function filtrarXdiagnostico(pListaPacientes, pDiagnostico) {
    const listaFiltrada = pListaPacientes.filter(paciente => {
        return paciente.diagnostico.toLowerCase() == pDiagnostico.toLowerCase();
    })
    return listaFiltrada
}

const boton1 = document.querySelector('#botonEdad') 
const edadMinima = document.querySelector('#edadMin')
const edadMax = document.querySelector('#edadMaxima')

const botonDiag = document.querySelector('#diagnostico')

boton1.addEventListener('click', filtroEdad);

function filtroEdad(event) {
    event.preventDefault();

    alert('filtro edad funcionando'); 
}
function pintarPacientes(pListaPacientes) {
    pListaPacientes.forEach(paciente => pintarPaciente(paciente));
}
function pintarPaciente(pPaciente) {
    let li = document.createElement('li');
    let nombrePaciente = document.createTextNode(pPaciente.nombre + " ")
    let apellidopaciente = document.createTextNode(pPaciente.apellido + " ")
    let edadPaciente = document.createTextNode(pPaciente.edad)
    let diagnosticoPaciente = document.createTextNode(pPaciente.diagnostico)
    
    
    li.appendChild(nombrePaciente)
    li.appendChild(apellidopaciente)
    li.appendChild(edadPaciente)
    li.appendChild(diagnosticoPaciente)
}


botonDiag.addEventListener('change', filtroDiagnostico); 

function filtroDiagnostico(event) {
    event.preventDefault();
    alert('filtro funcionando con change')

}

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hospital la princesa</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/lista.js"></script>
</head>

<body>

    <header>
        <div class="container">
            <!-- Aqui estarán los filtros -->
            <div>
                <h5>filtro por edad</h5>
                <!--  filtro de edad -->
                <form action="">
                    <select id="edadMin">
                        <option value="">Seleccion edad minima</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                        <option value="32">32</option>
                        <option value="33">33</option>
                        <option value="34">34</option>
                        <option value="35">35</option>
                        <option value="36">36</option>
                        <option value="37">37</option>
                        <option value="38">38</option>
                        <option value="39">39</option>
                        <option value="40">40</option>
                        <option value="41">41</option>
                        <option value="42">42</option>
                        <option value="43">43</option>
                        <option value="44">44</option>
                        <option value="45">45</option>
                        <option value="46">46</option>
                        <option value="47">47</option>
                        <option value="48">48</option>
                        <option value="49">49</option>
                        <option value="50">50</option>
                        <option value="51">51</option>
                        <option value="52">52</option>
                        <option value="53">53</option>
                        <option value="54">54</option>
                        <option value="55">55</option>
                        <option value="56">56</option>
                        <option value="57">57</option>
                        <option value="58">58</option>
                        <option value="59">59</option>
                        <option value="60">60</option>
                        <option value="61">61</option>
                        <option value="62">62</option>
                        <option value="63">63</option>
                        <option value="64">64</option>
                        <option value="65">65</option>
                        <option value="66">66</option>
                        <option value="67">67</option>
                        <option value="68">68</option>
                        <option value="69">69</option>
                        <option value="70">70</option>
                        <option value="71">71</option>
                        <option value="72">72</option>
                        <option value="73">73</option>
                        <option value="74">74</option>
                        <option value="75">75</option>
                        <option value="76">76</option>
                        <option value="77">77</option>
                        <option value="78">78</option>
                        <option value="79">79</option>
                        <option value="80">80</option>
                        <option value="81">81</option>
                        <option value="82">82</option>
                        <option value="83">83</option>
                        <option value="84">84</option>
                        <option value="85">85</option>
                        <option value="86">86</option>
                        <option value="87">87</option>
                        <option value="88">88</option>
                        <option value="89">89</option>
                        <option value="90">90</option>
                        <option value="91">91</option>
                        <option value="92">92</option>
                        <option value="93">93</option>
                        <option value="94">94</option>
                        <option value="95">95</option>
                        <option value="96">96</option>
                        <option value="97">97</option>
                        <option value="98">98</option>
                        <option value="99">99</option>
                        <option value="100">100</option>
                    </select>
                    <select id="edadMaxima">
                        <!-- option[value="$"]{$}*100 -->
                        <option value="">Seleccion edad máxima</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                        <option value="32">32</option>
                        <option value="33">33</option>
                        <option value="34">34</option>
                        <option value="35">35</option>
                        <option value="36">36</option>
                        <option value="37">37</option>
                        <option value="38">38</option>
                        <option value="39">39</option>
                        <option value="40">40</option>
                        <option value="41">41</option>
                        <option value="42">42</option>
                        <option value="43">43</option>
                        <option value="44">44</option>
                        <option value="45">45</option>
                        <option value="46">46</option>
                        <option value="47">47</option>
                        <option value="48">48</option>
                        <option value="49">49</option>
                        <option value="50">50</option>
                        <option value="51">51</option>
                        <option value="52">52</option>
                        <option value="53">53</option>
                        <option value="54">54</option>
                        <option value="55">55</option>
                        <option value="56">56</option>
                        <option value="57">57</option>
                        <option value="58">58</option>
                        <option value="59">59</option>
                        <option value="60">60</option>
                        <option value="61">61</option>
                        <option value="62">62</option>
                        <option value="63">63</option>
                        <option value="64">64</option>
                        <option value="65">65</option>
                        <option value="66">66</option>
                        <option value="67">67</option>
                        <option value="68">68</option>
                        <option value="69">69</option>
                        <option value="70">70</option>
                        <option value="71">71</option>
                        <option value="72">72</option>
                        <option value="73">73</option>
                        <option value="74">74</option>
                        <option value="75">75</option>
                        <option value="76">76</option>
                        <option value="77">77</option>
                        <option value="78">78</option>
                        <option value="79">79</option>
                        <option value="80">80</option>
                        <option value="81">81</option>
                        <option value="82">82</option>
                        <option value="83">83</option>
                        <option value="84">84</option>
                        <option value="85">85</option>
                        <option value="86">86</option>
                        <option value="87">87</option>
                        <option value="88">88</option>
                        <option value="89">89</option>
                        <option value="90">90</option>
                        <option value="91">91</option>
                        <option value="92">92</option>
                        <option value="93">93</option>
                        <option value="94">94</option>
                        <option value="95">95</option>
                        <option value="96">96</option>
                        <option value="97">97</option>
                        <option value="98">98</option>
                        <option value="99">99</option>
                        <option value="100">100</option>
                    </select>

                    <input type="submit" id="botonEdad" value="Filtrar por edad">
                </form>
            </div>
            <br>
            <hr>
            <br>
            <div>
                <!-- filtro diagnostico -->
                <select id="diagnostico">
                    <option value="">Seleccion un diagnostico</option>
                    <option value="Diabetes">Diabetes</option>
                    <option value="Anorexia">Anorexia</option>
                    <option value="Coronavirus">Coronavirus</option>
                    <option value="Diarrea">Diarrea</option>
                    <option value="Gripe">Gripe</option>
                </select>

            </div>
            <br>
            <hr>
            <br>
            <div>
                <form action="">
                    <!-- superfiltro -->
                    <select id="edadMin2">
                        <option value="">Seleccion edad minima</option>
                    </select>
                    <select id="edadMaxima2">
                        <!-- option[value="$"]{$}*100 -->
                        <option value="">Seleccion edad máxima</option>
                    </select>
                    <select id="diagnostico2">
                        <option value="">Seleccion un diagnostico</option>
                        <option value="Diabetes">Diabetes</option>
                        <option value="Anorexia">Anorexia</option>
                        <option value="Coronavirus">Coronavirus</option>
                        <option value="Diarrea">Diarrea</option>
                        <option value="Gripe">Gripe</option>
                    </select>
                    <input type="submit" id="superboton" value="superfiltro">
                </form>
            </div>
            <br>
            <hr>
            <br>
            <div>
                <input type="text" id="pacienteNombre" placeholder="Buscar paciente por nombre">
                <button id="buscar">BUSCAR PACIENTE</button>
            </div>
        </div>
    </header>
    <main>
        <h2 id="numeropacientes"></h2>
        <section id="pacientes">
            <!--  <article>
                <h3>Nombre y apellido</h3>
                <ul>
                    <li>EDAD: 38</li>
                    <li>NUMERO SEGURIDAD SOCIAL: A456789</li>
                </ul>
                <div class="diagnostico">
                    Coronavirus
                </div>
            </article> -->



        </section>


    </main>


    <script src="js/funciones.js"></script>
    <script src="js/eventos.js"></script>

</body>

</html>

标签： javascript

javascript - 无法获取过滤结果的功能

问题描述

解决方案

推荐阅读