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')
}
}
Please use below code:
//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> 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>