[英]How do I use elements from html in javascript for an onclick event?
我有一個 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" />
嘗試這個。 您可以在游戲對象中添加更多游戲。
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" />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.