如何在 javascript 中使用 html 中的元素进行 onclick 事件？

Question

我有一个 html 网页，可以根据平台和类型为您选择视频游戏。

当用户从下拉列表中选择平台和类型，然后单击“ Find game按钮时。 我如何从平台和类型中选择这些选择并在他们点击Find Game后输出Find Game ？

示例：当用户选择 xbox 和 shoter 时。 他按下“寻找游戏”。 然后网页显示“战争机器”。

HTML：

    <label for="platformType">
        Platform
    </label>
    <select name="platform" id="platformType">
        <option value="PC">(Choose Platform)</option>
        <option value="PC">PC</option>
        <option value="PS4">Playstation 4</option>
        <option value="switch">Switch</option>
        <option value="xbox">Xbox One</option>  
    </select>


    <label for="genreType">
        Genre
    </label>
    <select name="genre" id="genreType">
        <option value="PC">(Choose Genre)</option>
        <option value="Action">Action/Adventure</option>
        <option value="Fighter">Fighter</option>
        <option value="MMO">MMO</option>
        <option value="MOBA">MOBA</option>
        <option value="OpenWorld">Open World</option>
        <option value="Platformer">Platformer</option>
        <option value="Racing">Racing</option>
        <option value="RPG">RPG</option>
        <option value="Shooter">Shooter</option>
        <option value="Sports">Sports</option>
    </select>
    <input type="submit" value="Find Game" id="Submit" />

Answer 1

尝试这个。 您可以在游戏对象中添加更多游戏。

 var games=[{name:'Forza',platform:'xbox',genre:'Racing'}] var genre; var platform; $("#platformType").change(function(){ platform=$(this).val() }) $("#genreType").change(function(){ genre=$(this).val() }) $("#Submit").click(function(){games.filter((e)=>e.platform==platform && e.genre==genre?console.log(e.name):false)})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="platformType"> Platform </label> <select name="platform" id="platformType"> <option value="PC">(Choose Platform)</option> <option value="PC">PC</option> <option value="PS4">Playstation 4</option> <option value="switch">Switch</option> <option value="xbox">Xbox One</option> </select> <label for="genreType"> Genre </label> <select name="genre" id="genreType"> <option value="PC">(Choose Genre)</option> <option value="Action">Action/Adventure</option> <option value="Fighter">Fighter</option> <option value="MMO">MMO</option> <option value="MOBA">MOBA</option> <option value="OpenWorld">Open World</option> <option value="Platformer">Platformer</option> <option value="Racing">Racing</option> <option value="RPG">RPG</option> <option value="Shooter">Shooter</option> <option value="Sports">Sports</option> </select> <input type="submit" value="Find Game" id="Submit" />