当用户在输入字段中选择某些输入并单击“搜索”时，控制台.logs(“hello”)

Question

正如标题所暗示的，当用户在所有输入字段中选择字母“B”并点击搜索时，就会出现console.log('hello')

不，最终我希望它把他们带到另一个页面，但我觉得在我完成这部分之后会很容易。

帮帮我，欧比旺·克诺比。你是我唯一的希望。

这是我目前所拥有的

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

Answer 1

请使用以下代码：

1. 每个选项的赋值
2. 读取选定项的值作为 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> 

Answer 2

你打败了我一两分钟。我的解决方案（非常相似）：

<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>