Javascript / Jquery Help - Calling functions from select menu -
i need adding interactivity page. i'm new jquery , stuff simple been driving me nuts!
its footy team different players details stored in objects in array called squad_list squad_list.js
var squad = [ { number: 1, pic: 'img/hibberd_m_t.png', name: 'michael', surname: 'hibberd', height: '186 cm', weight: '86 kg', debut: 2011, position: ['defender'], games: 85, goals: 11 }, { number: 2, pic: 'img/bellchambers_t_t.png', name: 'tom', surname: 'bellchambers', height: '202 cm', weight: '106 kg', debut: 2008, position: ['ruck'], games: 79, goals: 53 }, { number: 3, pic: 'img/chapman_p_t.png', name: 'paul', surname: 'chapman', height: '179 cm', weight: '87 kg', debut: 2000, position: ['foward'], games: 280, goals: 366, goals15: 8 }, ]; etc etc
i have different functions create listquery squad_list based on different positions, games played etc ie addlistdefender creates list of players position = defender
i have drawtable function write info page
i've got select menu pick different listquery options values named after relevant listquery function should call
app.js
var listquery = []; // draw table 'listquery' array of objects function drawtable(tbody) { var tr, td; tbody = document.getelementbyid(tbody); // loop through data source // document.write(tbody); (var = 0; < listquery.length; i++) { tr = tbody.insertrow(tbody.rows.length); td = tr.insertcell(tr.cells.length); td.setattribute("align", "center"); td.innerhtml = "<p>" + listquery[i].number + "</p>"; td = tr.insertcell(tr.cells.length); td.innerhtml = '<img src="' + listquery[i].pic + '">'; td = tr.insertcell(tr.cells.length); td.innerhtml = listquery[i].name + " " + listquery[i].surname; td = tr.insertcell(tr.cells.length); td.innerhtml = listquery[i].height; td = tr.insertcell(tr.cells.length); td.innerhtml = listquery[i].weight; td = tr.insertcell(tr.cells.length); td.innerhtml = listquery[i].debut; td = tr.insertcell(tr.cells.length); if (listquery[i].position.length > 1) { td.innerhtml += listquery[i].position[0] + " / " + listquery[i].position[1]; } else { td.innerhtml += listquery[i].position; } td = tr.insertcell(tr.cells.length); td.innerhtml = listquery[i].games; td = tr.insertcell(tr.cells.length); td.innerhtml = listquery[i].goals; td = tr.insertcell(tr.cells.length); } } //display entire list var displaylist = function() { listquery = squad; }; //take players list position = foward var addlistfoward = function() { (i = 0; < squad.length; i++) { if (squad[i].position.indexof("foward") >= 0) { listquery.push(squad[i]); console.log(squad[i]); } } } //take players list position = defender var addlistdefender = function() { (i = 0; < squad.length; i++) { if (squad[i].position === "defender") { listquery.push(squad[i]); console.log(squad[i]); } } } //take 10 items player list in order of games var addlistgames = function () { squad.sort(function(a, b){ return b.games-a.games }) listquery = squad; listquery.length = 10; } // site starts display entire list displaylist(); drawtable("output"); //generate list query on change select button select options value $('#select').change(function() { }); //display selection select button onclick go button $('#go').click(function() { // alert("go has been click!"); drawtable("output"); }); basically when select menu changed want call function equal select value , redraw table go button.....but various things i've tried on $('#select') , $('#go') don't work.
any appreciated!!!
<!doctype html> <html lang="en"> <head> <meta cahrset="utf-8"> <title>bombers squad</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="header"> <div class="main-title"> <h1>bombers squad</h1> </div> <div class="logo"> <img src="img/logo-2x.png" alt="bombers logo"> </div> </div> <div class="main-field"> <form> <label for="select">view bombers squad:</label> <select id="select" name="bombers_list"> <option value="displaylist">display entire list</option> <option value="addlistfoward">display fowards</option> <option value="addlistmidfield">display midfielders</option> <option value="addlistdefender">display defenders</option> <option value="addlistruck">display rucks</option> <option value="addlistgames">display games</option> <option value="addgoals2015">2015 goal kickers</option> <option value="addbf2015">2015 best & fairest votes</option> </select> <button id="go" type="submit">go</button> </form> <table id="players"> <caption>player information</caption> <thead> <tr> <th scope="col">number</th> <th scope="col">picture</th> <th scope="col">name</th> <th scope="col">height</th> <th scope="col">weight</th> <th scope="col">debut</th> <th scope="col">position</th> <th scope="col">games</th> <th scope="col">goals</th> </tr> </thead> <tbody id="output"> </tbody> </table> </div> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/squad_list.js"></script> <script src="js/app.js"></script> </body> </html>
seems forget include jquery or not referenced
check below answer & working demo
or add
$(function(){ $('#select').change(function () { }); //display selection select button onclick go button $('#go').click(function () { alert("go has been click!"); drawtable("output"); }); }) 
Comments
Post a Comment