Having trouble with datalist and redirect of results

Question

Hello I am trying to make a redirect of search results from my search bars but it returns all the search results to the very last statement I make in the function

here is the JS for the search redirection

              var inputSearchCalc = document.querySelector('#calculatorSearch').value;
        var searchCalcBtn = document.querySelector('#search-calculator-index');

        function searchCalc() {
            if (inputSearchCalc = 'Algebra') {
                window.location = '/educationSec/calculatorSubjects/algebra/algebra.html'
            } 
            if (inputSearchCalc = 'Analytical Chemistry') {
                window.location = '/educationSec/calculatorSubjects/AChem/AChem.html'
            } 
            if (inputSearchCalc ='Chemistry') {
                window.location = '/educationSec/calculatorSubjects/chemistry/chemistry.html'
            } 
            if (inputSearchCalc = 'Economics') {
                window.location = '/educationSec/calculatorSubjects/economics/economics.html'
            }
            if (inputSearchCalc = 'Financial Accounting') {
                window.location = '/educationSec/calculatorSubjects/finAccounting/finAccounting.html'
            }
            if (inputSearchCalc = 'Geometry') {
                window.location = '/educationSec/calculatorSubjects/geometery/geometery.html'
            }
            if (inputSearchCalc = 'Managerial Accounting') {
                window.location = '/educationSec/calculatorSubjects/manAccounting/manAccounting.html'
            }
            if (inputSearchCalc = 'Organic Chemistry') {
                window.location = '/educationSec/calculatorSubjects/organicChem/organicChem.html'
            }
            if (inputSearchCalc = 'Physics') {
                window.location = '/educationSec/calculatorSubjects/physics/physics.html'
            }
            if (inputSearchCalc = 'Precalculus') {
                window.location = '/educationSec/calculatorSubjects/precalc/precalc.html'
            } 
        }

     searchCalcBtn.addEventListener('click' , searchCalc);

All of the results redirect to the precalc page which is the last one

Answer 1

Friday's and Paul's answers were great. The single "=" trips even seasoned programmers all the time. Whatever language you're programming in, it is always good to spend a little time on every form of assignment and testing of values for any kind of object you might be dealing with--integers, reals, strings, objects, pointers, types, structs, etc.

I loved that switch was given good exposure.

Another thing I liked was how folks split out the baseURL. The variable name was perfect. It makes the code much easy to understand and maintain.

Jack's response was my favorite. Not only is his code simple without sacrificing correctness or completeness, but this data can be packed into a JSON configuration file outside the main program or into a database. It makes debugging, testing, and error handling easier to implement as needed.

Even for simple ad-hoc single use programs, this allows you to put all your configuration data at the top of the program so the program can be copied, edited and re-run if desired.

Answer 2

The easiest thing to do, which would fix the if statements issue (you're assigning not comparing - should be using == not =), and also make the code smaller, would be to use an object. Add this:

var subjectURLs = {
    'Algebra': 'algebra/algebra.html',
    'Analytical Chemistry': 'AChem/AChem.html',
    'Chemistry': 'chemistry/chemistry.html',
    'Economics': 'economics/economics.html',
    'Financial Accounting': 'finAccounting/finAccounting.html',
    'Geometry': 'geometery/geometery.html',
    'Managerial Accounting': 'manAccounting/manAccounting.html',
    'Organic Chemistry': 'organicChem/organicChem.html',
    'Physics': 'physics/physics.html',
    'Precalculus': 'precalc/precalc.html'
}

const baseURL = '/educationSec/calculatorSubjects/';

Then just do this with your code:

function searchCalc(search) {
    window.location = baseURL + subjectURLS[search];
}

Example (console.log is in place so you can see output):

var subjectURLs = {
    'Algebra': 'algebra/algebra.html',
    'Analytical Chemistry': 'AChem/AChem.html',
    'Chemistry': 'chemistry/chemistry.html',
    'Economics': 'economics/economics.html',
    'Financial Accounting': 'finAccounting/finAccounting.html',
    'Geometry': 'geometery/geometery.html',
    'Managerial Accounting': 'manAccounting/manAccounting.html',
    'Organic Chemistry': 'organicChem/organicChem.html',
    'Physics': 'physics/physics.html',
    'Precalculus': 'precalc/precalc.html'
}

const baseURL = '/educationSec/calculatorSubjects/';

function searchCalc(search) {
    console.log(baseURL + subjectURLs[search]);
}
    
searchCalc("Algebra");
searchCalc("Physics");

Hopefully this helps!

Answer 3

You are getting the value before the function triggers, therefore it is returning empty value. you should get the value after calling the function and use double equal == or === to compare two values not single assignment operator =. Is working fine now

var educationList = document.querySelector('#educationListOutput');

        educationList.innerHTML = industries;

        //var inputSearchCalc = document.querySelector('#calculatorSearch').value;
        var inputSearchCalc = document.querySelector('#calculatorSearch');

         var searchCalcBtn = document.querySelector('#search-calculator-index');


            function searchCalc() {

                inputSearchCalc = inputSearchCalc.value; //Added this line

                if (inputSearchCalc == 'Algebra') {
                    window.location = '/educationSec/calculatorSubjects/algebra/algebra.html'
                } 
                if (inputSearchCalc == 'Analytical Chemistry') {
                    window.location = '/educationSec/calculatorSubjects/AChem/AChem.html'
                } 
                if (inputSearchCalc =='Chemistry') {
                    window.location = '/educationSec/calculatorSubjects/chemistry/chemistry.html'
                } 
                if (inputSearchCalc == 'Economics') {
                    window.location = '/educationSec/calculatorSubjects/economics/economics.html'
                }
                if (inputSearchCalc == 'Financial Accounting') {
                    window.location = '/educationSec/calculatorSubjects/finAccounting/finAccounting.html'
                }
                if (inputSearchCalc == 'Geometry') {
                    window.location = '/educationSec/calculatorSubjects/geometery/geometery.html'
                }
                if (inputSearchCalc == 'Managerial Accounting') {
                    window.location = '/educationSec/calculatorSubjects/manAccounting/manAccounting.html'
                }
                if (inputSearchCalc == 'Organic Chemistry') {
                    window.location = '/educationSec/calculatorSubjects/organicChem/organicChem.html'
                }
                if (inputSearchCalc == 'Physics') {
                    window.location == '/educationSec/calculatorSubjects/physics/physics.html'
                }
                if (inputSearchCalc == 'Precalculus') {
                    window.location = '/educationSec/calculatorSubjects/precalc/precalc.html'
                } 
            }

Answer 4

Here is a sample of converting the method to a switch. Note: I change the function to take in the searchParam as a parameter, this allows you to test your code and encapsulates the function.

function searchCalc(searchParam) {
  let urlBase = '/educationSec/calculatorSubjects/';
  switch (searchParam) {
    case 'Algebra':
      urlBase += 'algebra/algebra.html';
      break;
    case 'Analytical Chemistry':
      urlBase += 'AChem/AChem.html';
      break;
    case 'Chemistry':
      urlBase += 'chemistry/chemistry.html';
      break;
    case 'Economics':
      urlBase += 'economics/economics.html';
      break;
    case 'Financial Accounting':
      urlBase += 'finAccounting/finAccounting.html';
      break;
    case 'Geometry':
      urlBase += 'geometery/geometery.html';
      break;
    case 'Managerial Accounting':
      urlBase += 'manAccounting/manAccounting.html';
      break;
    case 'Organic Chemistry':
      urlBase += 'organicChem/organicChem.html';
      break;
    case 'Physics':
      urlBase += 'physics/physics.html';
      break;
    case 'Precalculus':
      urlBase += 'precalc/precalc.html';
      break;
    default: 
      urlBase += '404.html';
      break;
  }
  return urlBase;
}

console.log(searchCalc("Organic Chemistry"));
console.log(searchCalc("Wrong Search"));