I'm working on a small project for a blog where the user would type the year of birth and discover the Chinese sign. First I tested assigning a value to variable and it worked fine, I could see the full object, but when replaces it with document.getElementById("ano") It doesn't work.

function getSign() {  
  const nascimento = document.getElementById("ano");

  const signos = [
    {name:"boi",      Sdate: [1913, 1925, 1937, 1949, 1961, 1973, 1985, 1997, 2009, 2021]},
    {name:"rato",     Sdate: [1912, 1924, 1936, 1948, 1960, 1972, 1984, 1996, 2008, 2020]},
    {name:"tigre",    Sdate: [1914, 1926, 1938, 1950, 1962, 1974, 1986, 1998, 2010, 2022]},
    {name:"coelho",   Sdate: [1915, 1927, 1939, 1951, 1963, 1975, 1987, 1999, 2011, 2023]},
    {name:"dragao",   Sdate: [1916, 1928, 1940, 1952, 1964, 1976, 1988, 2000, 2012, 2024]},
    {name:"serpente", Sdate: [1917, 1929, 1941, 1953, 1965, 1977, 1989, 2001, 2013, 2025]},
    {name:"cavalo",   Sdate: [1918, 1930, 1942, 1954, 1966, 1978, 1990, 2002, 2014, 2026]},
    {name:"carneiro", Sdate: [1919, 1931, 1943, 1955, 1967, 1979, 1991, 2003, 2015, 2027]},
    {name:"macaco",   Sdate: [1920, 1932, 1944, 1956, 1968, 1980, 1992, 2004, 2016, 2028]},
    {name:"galo",     Sdate: [1921, 1933, 1945, 1957, 1969, 1981, 1993, 2005, 2017, 2029]},
    {name:"cachorro", Sdate: [1922, 1934, 1946, 1958, 1970, 1982, 1994, 2006, 2018, 2030]},
    {name:"porco",    Sdate: [1923, 1935, 1947, 1959, 1971, 1983, 1995, 2007, 2019, 2031]}
  ];

  const resultado = signos.filter((signos) => 
    signos.Sdate.includes(nascimento));

  console.log(resultado);
}
// Printing desired values.

<input type="number" 
  placeholder="Digite seu ano de nascimento" 
  maxlength="4" 
  id="ano"></input>

<button onclick="getSign()">Confirmar</button>    

I'd like to show for users a mensagem as 'you're the sign of the mouse' and a link to a certain page with more informations about that sign

CodePudding user response：

I think everyone's addressed that you should be using value to get the value of the input element, but here are some other pointers to get you where you need to be.

1. Add a new element with a message id. At the end of the example you'll be able to add some HTML to it with a link.

2. You may find easier in this case than filter. Since you're only looking for one object with a matching year find will return that object rather than an array of objects.

3. With modern JS it's useful to steer away from inline JS. Use addEventListener instead. You can attach the listener to the button like you did in the markup.

4. Re the message you can build that with a template/string literals. This will enable you to add in the name of the found sign, and wrap it in an anchor.

// Cache the elements
const nascimento = document.querySelector('#ano');
const message = document.querySelector('#message');
const button = document.querySelector('button');

// Add an event listener to the button which calls
// the function
button.addEventListener('click', getSign);

const signos=[{name:"boi",Sdate:[1913,1925,1937,1949,1961,1973,1985,1997,2009,2021]},{name:"rato",Sdate:[1912,1924,1936,1948,1960,1972,1984,1996,2008,2020]},{name:"tigre",Sdate:[1914,1926,1938,1950,1962,1974,1986,1998,2010,2022]},{name:"coelho",Sdate:[1915,1927,1939,1951,1963,1975,1987,1999,2011,2023]},{name:"dragao",Sdate:[1916,1928,1940,1952,1964,1976,1988,2e3,2012,2024]},{name:"serpente",Sdate:[1917,1929,1941,1953,1965,1977,1989,2001,2013,2025]},{name:"cavalo",Sdate:[1918,1930,1942,1954,1966,1978,1990,2002,2014,2026]},{name:"carneiro",Sdate:[1919,1931,1943,1955,1967,1979,1991,2003,2015,2027]},{name:"macaco",Sdate:[1920,1932,1944,1956,1968,1980,1992,2004,2016,2028]},{name:"galo",Sdate:[1921,1933,1945,1957,1969,1981,1993,2005,2017,2029]},{name:"cachorro",Sdate:[1922,1934,1946,1958,1970,1982,1994,2006,2018,2030]},{name:"porco",Sdate:[1923,1935,1947,1959,1971,1983,1995,2007,2019,2031]}];

function getSign() {  

  // Assign the value of the input element to `year`
  // Hat Tip to Mister Jojo for the ref to the
  // relatively unknown `valueAsNumber` property
  const year = nascimento.valueAsNumber;

  // Find the object where the `sDate` array includes
  // the year. Note it returns `undefined` if the object
  // is not found...
  const sign = signos.find(obj => {
    return obj.Sdate.includes(year);
  });

  // ...so before we log the message we need to check that
  // the returned value from `find` exists, and then create
  // the HTML which we can attach to the message element with
  // `innerHTML`
  if (sign) {
    message.innerHTML = `Born in The Year Of The <a href="/${sign.name}"><span >${sign.name}</span></a>.`;
  }
  
}

.sign { text-transform: capitalize; }
#message { margin-top: 1em; }

<input type="number" placeholder="Digite seu ano de nascimento" maxlength="4" id="ano">
<button>Confirmar</button>
<div id="message"></div>

CodePudding user response：

document.getElementById("ano").value