0

Tengo este código HTML, que es una lista desplegable de año, mes y día. Eso funciona; pero no me funciona la función JavaScript que reciba la selección de un año, mes y día especifico. Y además mostrar como resultado a que signo del zodiaco chino correspondería. ¡Alguna ayuda! Eso, no se si se entiende.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Horoscopo Chino</title>    
</head>
<body>

<h1>Encuentra tu signo del horóscopo chino</h1>
<h2>Elija su fecha de nacimiento y descubra su signo de horóscopo chino.</h2>

<form>
<tr>
    <th>
<select name="AÑO">
    <option value="1">1921</option>
    <option value="2">1922</option>
    <option value="3">1923</option>
    <option value="4">1924</option> 
    <option value="5">1925</option> 
    <option value="6">1926</option>
    <option value="7">1927</option>
    <option value="8">1928</option>
    <option value="9">1929</option>
    <option value="10">1930</option>
    <option value="11">1931</option>
    <option value="12">1932</option>
    <option value="13">1933</option>
    <option value="14">1934</option>
    <option value="15">1935</option>
    <option value="16">1936</option>
    <option value="17">1937</option>
    <option value="18">1938</option>
    <option value="19">1939</option>
    <option value="20">1940</option>
    <option value="21">1941</option>
    <option value="22">1942</option>
    <option value="23">1943</option>
    <option value="24">1944</option>
    <option value="25">1945</option>
    <option value="26">1946</option>
    <option value="27">1947</option>
    <option value="28">1948</option>
    <option value="29">1949</option>
    <option value="30">1950</option>
    <option value="31">1951</option>
    <option value="32">1952</option>
    <option value="33">1953</option>
    <option value="34">1954</option>
    <option value="35">1955</option>
    <option value="36">1956</option>
    <option value="37">1957</option>
    <option value="38">1958</option>
    <option value="39">1959</option>
    <option value="40">1960</option>
    <option value="41">1961</option>
    <option value="42">1962</option>
    <option value="43">1963</option>
    <option value="44">1964</option>
    <option value="45">1965</option>
    <option value="46">1966</option>
    <option value="47">1967</option>
    <option value="48">1968</option>
    <option value="49">1969</option>
    <option value="50">1970</option>
    <option value="51">1971</option>
    <option value="52">1972</option>
    <option value="53">1973</option>
    <option value="54">1974</option>
    <option value="55">1975</option>
    <option value="56">1976</option>
    <option value="57">1977</option>
    <option value="58">1978</option>
    <option value="59">1979</option>
    <option value="60">1980</option>
    <option value="61">1981</option>
    <option value="62">1982</option>
    <option value="63">1983</option>
    <option value="64">1984</option>
    <option value="65">1985</option>
    <option value="66">1986</option>
    <option value="67">1987</option>
    <option value="68">1988</option>
    <option value="69">1989</option>
    <option value="70">1990</option>
    <option value="71">1991</option>
    <option value="72">1992</option>
    <option value="73">1993</option>
    <option value="74">1994</option>
    <option value="75">1995</option>
    <option value="76">1996</option>
    <option value="77">1997</option>
    <option value="78">1998</option>
    <option value="79">1999</option>
    <option value="80">2000</option>
    <option value="81">2001</option>
    <option value="82">2002</option>
    <option value="83">2003</option>
    <option value="84">2004</option>
    <option value="85">2005</option>
    <option value="86">2006</option>
    <option value="87">2007</option>
    <option value="88">2008</option>
    <option value="89">2009</option>
    <option value="90">2010</option>
    <option value="91">2011</option>
    <option value="92">2012</option>
    <option value="93">2013</option>
    <option value="94">2014</option>
    <option value="95">2015</option>
    <option value="96">2016</option>
    <option value="97">2017</option>
    <option value="98">2018</option>
    <option value="99">2019</option>
    <option value="100">2020</option>
    
</select>
    </th>
    <th>
    <select name="MES">
        <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>
</select>
    </th>
    <th>
            <select name="DIA">
            <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>
            
</select>
    </th>
</tr>
    <input type="button" value="Consultar" onclick="getElements()" class="button-enviar">
    </form>

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

<script>
    function getElements(){
        var x = document.getElementsByName("rata");
            document.getElementById("demo").innerHTML = "RATA";
    }
</script>    
</body>
</html>

2 respuestas 2

0

Se entiende tu idea, sería bueno que trabajes con DOM. Te recomiendo que investigues este par de funciones:

document.querySelector()

document.getElementById()

document.getElementsByTagName()

Te van a servir de mucho para obtener datos y manipular los elementos en tu HTML.

<script>
      const demo = document.getElementById("demo");
      const form = document.getElementsByTagName("form")[0].children;
      function getElements() {
        
        let year = form[0].value;
        let month = form[1].value;
        let day = form[2].value;
        // year
        console.log(year);

        //month
        console.log(month);

        //day
        console.log(day);

        //set demo
        demo.innerText = `J'adore JS💛!\n${year}-${month}-${day}`;
      }
    </script>

Si te resulta más fácil, podrías usar de framework Jquery, aunque al parecer, no es muy recomendable hoy en día.

¡Saludos! JS💛!

0

Es más sencillo si pones a cada select un id para luego buscar ese elemento usando document.getElementById('elemento'). En el ejemplo, la función consultar() es llamada cuando se hace click al botón consultar. La función busca los select por sus id y guarda el valor seleccionado en una variable. Ya con eso se puede implementar la lógica necesaria.

function consultar(){

let año = document.getElementById('año').value;
let mes = document.getElementById('mes').value;
let dia = document.getElementById('dia').value;


console.log(`el año es: ${año} el mes es ${mes}  el dia es: ${dia}`)


}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Horoscopo Chino</title>    
</head>
<body>

<h1>Encuentra tu signo del horóscopo chino</h1>
<h2>Elija su fecha de nacimiento y descubra su signo de horóscopo chino.</h2>

<form>
<tr>
    <th>
<select name="AÑO" id="año">
    <option value="1">1921</option>
    <option value="2">1922</option>
    <option value="3">1923</option>
    <option value="4">1924</option> 
    <option value="5">1925</option> 
    <option value="6">1926</option>
    <option value="7">1927</option>
    <option value="8">1928</option>
    <option value="9">1929</option>
    <option value="10">1930</option>
    <option value="11">1931</option>
    <option value="12">1932</option>
    <option value="13">1933</option>
    <option value="14">1934</option>
    <option value="15">1935</option>
    <option value="16">1936</option>
    <option value="17">1937</option>
    <option value="18">1938</option>
    <option value="19">1939</option>
    <option value="20">1940</option>
    <option value="21">1941</option>
    <option value="22">1942</option>
    <option value="23">1943</option>
    <option value="24">1944</option>
    <option value="25">1945</option>
    <option value="26">1946</option>
    <option value="27">1947</option>
    <option value="28">1948</option>
    <option value="29">1949</option>
    <option value="30">1950</option>
    <option value="31">1951</option>
    <option value="32">1952</option>
    <option value="33">1953</option>
    <option value="34">1954</option>
    <option value="35">1955</option>
    <option value="36">1956</option>
    <option value="37">1957</option>
    <option value="38">1958</option>
    <option value="39">1959</option>
    <option value="40">1960</option>
    <option value="41">1961</option>
    <option value="42">1962</option>
    <option value="43">1963</option>
    <option value="44">1964</option>
    <option value="45">1965</option>
    <option value="46">1966</option>
    <option value="47">1967</option>
    <option value="48">1968</option>
    <option value="49">1969</option>
    <option value="50">1970</option>
    <option value="51">1971</option>
    <option value="52">1972</option>
    <option value="53">1973</option>
    <option value="54">1974</option>
    <option value="55">1975</option>
    <option value="56">1976</option>
    <option value="57">1977</option>
    <option value="58">1978</option>
    <option value="59">1979</option>
    <option value="60">1980</option>
    <option value="61">1981</option>
    <option value="62">1982</option>
    <option value="63">1983</option>
    <option value="64">1984</option>
    <option value="65">1985</option>
    <option value="66">1986</option>
    <option value="67">1987</option>
    <option value="68">1988</option>
    <option value="69">1989</option>
    <option value="70">1990</option>
    <option value="71">1991</option>
    <option value="72">1992</option>
    <option value="73">1993</option>
    <option value="74">1994</option>
    <option value="75">1995</option>
    <option value="76">1996</option>
    <option value="77">1997</option>
    <option value="78">1998</option>
    <option value="79">1999</option>
    <option value="80">2000</option>
    <option value="81">2001</option>
    <option value="82">2002</option>
    <option value="83">2003</option>
    <option value="84">2004</option>
    <option value="85">2005</option>
    <option value="86">2006</option>
    <option value="87">2007</option>
    <option value="88">2008</option>
    <option value="89">2009</option>
    <option value="90">2010</option>
    <option value="91">2011</option>
    <option value="92">2012</option>
    <option value="93">2013</option>
    <option value="94">2014</option>
    <option value="95">2015</option>
    <option value="96">2016</option>
    <option value="97">2017</option>
    <option value="98">2018</option>
    <option value="99">2019</option>
    <option value="100">2020</option>
    
</select>
    </th>
    <th>
    <select name="MES" id="mes">
        <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>
</select>
    </th>
    <th>
            <select name="DIA" id="dia">
            <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>
            
</select>
    </th>
</tr>
    <input type="button" value="Consultar" onclick="consultar()" class="button-enviar">
    </form>

<p id="demo"></p>
   
</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.