Input and Javascript

June 13, 2023

I need that when I type in the two inputs and then press on the button, one gets me the titles and the other gets me the locations, but I don’t know how to do that

It’s probably simpler than I think, but I really don’t know how to use the document.getelementbyid.

const jobs = [{
    title: "Marketing Intern",
    location: "US, NY, New York"
  },
  {
    title: "Customer Service - Cloud Video Production",
    location: "NZ, Auckland",
  },
  {
    title: "Commissioning Machinery Assistant (CMA)",
    location: "US, IA, Wever",
  },
  {
    title: "Account Executive - Washington DC",
    location: "US, DC, Washington",
  },
  {
    title: "Bill Review Manager",
    location: "US, FL, Fort Worth"
  },
  {
    title: "Accounting Clerk",
    location: "US, MD,"
  },
  {
    title: "Head of Content (m/f)",
    location: "DE, BE, Berlin"
  },
  {
    title: "Lead Guest Service Specialist",
    location: "US, CA, San Francisco",
  },
  {
    title: "HP BSM SME",
    location: "US, FL, Pensacola"
  },
  {
    title: "Customer Service Associate - Part Time",
    location: "US, AZ, Phoenix",
  },
  {
    title: "ASP.net Developer Job opportunity at United States,New Jersey",
    location: "US, NJ, Jersey City",
  },
  {
    title: "Talent Sourcer (6 months fixed-term contract)",
    location: "GB, LND, London",
  },
  {
    title: "Applications Developer, Digital",
    location: "US, CT, Stamford",
  },
  {
    title: "Installers",
    location: "US, FL, Orlando"
  },
  {
    title: "Account Executive - Sydney",
    location: "AU, NSW, Sydney"
  },
  {
    title: "VP of Sales - Vault Dragon",
    location: "SG, 01, Singapore",
  },
  {
    title: "Hands-On QA Leader",
    location: "IL, Tel Aviv, Israel"
  },
  {
    title: "Southend-on-Sea Traineeships Under NAS 16-18 Year Olds Only",
    location: "GB, SOS, Southend-on-Sea",
  },
  {
    title: "Visual Designer",
    location: "US, NY, New York"
  },
  {
    title: "Process Controls Engineer - DCS PLC MS Office - PA",
    location: "US, PA, USA Northeast",
  },
  {
    title: "Marketing Assistant",
    location: "US, TX, Austin"
  },
  {
    title: "Front End Developer",
    location: "NZ, N, Auckland"
  },
  {
    title: "Engagement Manager",
    location: "AE,"
  },
  {
    title: "Vice President, Sales and Sponsorship (Businessfriend.com)",
    location: "US, CA, Carlsbad",
  },
  {
    title: "Customer Service",
    location: "GB, LND, London"
  },
  {
    title: "H1B SPONSOR FOR L1/L2/OPT",
    location: "US, NY, New York"
  },
  {
    title: "Marketing Exec",
    location: "SG,"
  },
  {
    title: "HAAD/DHA Licensed Doctors Opening in UAE",
    location: "AE, AZ, Abudhabi",
  },
  {
    title: "Talent Management Process Manager",
    location: "US, MO, St. Louis",
  },
  {
    title: "Customer Service Associate",
    location: "CA, ON, Toronto"
  },
  {
    title: "Customer Service Technical Specialist",
    location: "US, MA, Waltham",
  },
  {
    title: "Software Applications Specialist",
    location: "US, KS,"
  },
  {
    title: "Craftsman Associate",
    location: "US, WA, Everett"
  },
  {
    title: "Completion Engineer",
    location: "US, CA, San Ramon"
  },
  {
    title: "I Want To Work At Karmarama",
    location: "GB, LND,"
  },
  {
    title: "English Teacher Abroad",
    location: "US, NY, Saint Bonaventure",
  },
]


function findJobs(jobs, title, location) {
  let count = 0; // Contatore per il numero di lavori trovati

  jobs.forEach(job => { // 
    const lowercaseTitle = job.title.toLowerCase();
    const lowercaseLocation = job.location.toLowerCase();

    if (lowercaseTitle.includes(title) && lowercaseLocation.includes(location)) {
      console.log(job.title, job.location);
      count++
    }
  });

  console.log("Numero di lavori trovati:", count);
}


findJobs(jobs, "customer", "us");

<form>
  <input type="text" id="title" placeholder="Inserisci il titolo lavorativo">
  <input type="text" id="locationInput" placeholder="Inserisci la posizione">
  <button type="button" onclick="findJobs(jobs)">Cerca</button>
</form>

>Solution :

As already pointed out in the comments, you have to update your function call to get the values of the User Input.

<form>
    <input type="text" id="title" placeholder="Inserisci il titolo lavorativo" />
    <input type="text" id="locationInput" placeholder="Inserisci la posizione" />
    <button
        type="button"
        onclick="findJobs(jobs, document.getElementById('title').value.toLowerCase(), document.getElementById('locationInput').value.toLowerCase())"
    >
        Cerca
    </button>
</form>

Please note the toLowerCase() extension, because your function also works with Lower Case text for the search. You can do the transformation to lower case in the function itself as well, but for simplicity I put it here in the function call.