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

Question

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')
  }
  
}

Check out [how to get the currently selected value of an select element](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) and [how to trigger a function when the selected value is changed](https://www.w3schools.com/jsref/event_onchange.asp). — Vid, Sep 30 '21 at 15:23
Hey thank you for the reply! The value link you provided was super helpful, but i dont believe the onchange can be used in this situation since the key event im utilizing is onclick. Is the there another solution that may be more beneficial? Thank you — Joshua, Sep 30 '21 at 15:34
My bad, I didn't see you were using a button to search. Your current way should be fine. — Vid, Sep 30 '21 at 15:39

score 0 · Accepted Answer · answered Sep 30 '21 at 15:41

Please use below code:

Assigned value for each option
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>

score 0 · Answer 2 · answered Sep 30 '21 at 15:51

You beat me by a min or two. My solution (very similar):

<select id='inputOne'>
    <option 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 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 selected disabled>Please select</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

<button type='button' id="searchButton">search</button>


<script>

    //Assigned Variable to html elements

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




    searchButton.addEventListener('click', function () {
        var a = inputOne.value;
        var b = inputTwo.value;
        var c = inputThree.value
        if (a === 'b' && b === 'b' && c === 'b') {
            console.log('Hello');
        }


    });



</script>

OH MY GOSH I LOVE THIS. Reassigning the value makes the if stamtments so much shorter. Youre such a homie! Will use. Thank you!! — Joshua, Sep 30 '21 at 16:04

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

2 Answers2