Search code examples
javascripthtmlinputdropdown

When a user selects certain inputs in an Input Fields, and clicks "Search" it console.logs("hello")


As the title suggests, when a user selects the letter 'B' in all the input fields, and clicks search it then will console.log('hello')

No eventually I want it to take them to anotehr page but I feel like that will come easy after I have this part down.

Help Me, Obi-Wan Kenobi. You're My Only Hope.

Here is what I have so far

HTML

<select id='inputOne'> 
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

<select id='inputTwo'>
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

<select id='inputThree'>
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

<button type='button' onclick='myFunction()'>search</button> 

JavaScript

//Assigned Variable to html elements

const inputOne = document.getElementById('inputOne');
const inputTwo = document.getElementById('inputTwo');
const inputThree = document.getElementById('inputThree');      


//function to open a new page(or in this case say hekllo in the console)      

function myFunction() {
  
  if(inputOne == 'B' && inputTwo == 'B' &&  inputThree == 'B') {
    console.log('hello')
  } else {
    console.log('error')
  }
  
}

Solution

  • Please use below code:

    1. Assigned value for each option
    2. reading value of the selected item as input.value

    //Assigned Variable to html elements
    
    const inputOne = document.getElementById('inputOne');
    const inputTwo = document.getElementById('inputTwo');
    const inputThree = document.getElementById('inputThree');      
    
    
    //function to open a new page(or in this case say hekllo in the console)      
    
    function myFunction() {
      if(inputOne.value == 'B' && inputTwo.value == 'B' &&  inputThree.value == 'B') {
        console.log('hello')
      } else {
        console.log('error')
      }
      
    }
    <select id='inputOne'> 
        <option value="" selected disabled>Please select</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    
    <select id='inputTwo'>
        <option value="" selected disabled>Please select</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    
    <select id='inputThree'>
        <option value="" selected disabled>Please select</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    
    <button type='button' onclick='myFunction()'>search</button>