$（ "。class"）。val（）は未定義の値を返しています

Question

私はTrello APIに接続し、ボードからリストを作成しています。私は各リストからすべてのカードをリストしようとしています。 value属性からListIDを取得すると、 "undefined"が返されます。どうしてこれなの？

私はHTMLは次のように出力しているdocument.getElementById("demo").innerHTML = $(".board").val();

//HTML 
<label>Choose from a List of Boards</label> 
<div id="output"></div> 

<label>Display Cards Below for Board Selected</label> 
<div id="outputCards"></div> 

<p id="demo"></p> 

//Javascript 
    var $boards = $("<select>") 
      .attr("id", "boards") 
     .text("Loading Boards...") 
     .appendTo("#output"); 

    Trello.get("/boards/BOARD_ID/lists", function(boards) { 
     $boards.empty(); 
     $.each(boards, function(ix, board) { 
      $("<option>") 
      .attr({href: board.url, target: "trello", value : board.id, name : board.id, id : board.id}) 
      .addClass("board") 
      .text(board.name) 
      .appendTo($boards); 
     }); 
    }); 


    var $cards = $("<div>") 
     .text("Loading Cards...") 
     .appendTo("#outputCards") 
     .appendTo("#demo"); 

    // This is where I'm trying to return the value 
    document.getElementById("demo").innerHTML = $(".board").val(); 

    var resource = "lists/LIST_ID/cards"; 
    Trello.get(resource, function(cards) { 
     $cards.empty(); 
     $.each(cards, function(ix, card) { 
      $("<a>") 
      .attr({href: card.url, target: "trello"}) 
      .addClass("card") 
      .text(card.name) 
      .appendTo($cards); 
     }); 
    }); 

でそれをプリントアウトしています：

<label>Choose from a List of Boards</label> 
    <div id="output"> 
     <select id="boards"> 
      <option target="trello" value="LIST_ID" name="LIST_ID" id="LIST_ID" class="board"> 
       List One 
      </option> 
      ... 
     </select> 
    </div> 

<label>Display Cards Below for Board Selected</label> 
<div id="outputCards"></div> 

<p id="demo">undefined</p> 

Answer 1

私はここでの主な問題は、boardクラスは唯一の要素に追加されていることだと思いますTrello.getコールバックにあります。

このコードは非同期で実行されるため、コールバック内のコードが実行される前に$(".board").val()を実行している可能性があります。つまり、 `$（"。board "）は要素を返しませんでした。

私は `Trello`が何であるかを知らないこの

Trello.get("/boards/BOARD_ID/lists", function(boards) { 
     $boards.empty(); 
     $.each(boards, function(ix, board) { 
      $("<option>") 
      .attr({href: board.url, target: "trello", value : board.id, name : board.id, id : board.id}) 
      .addClass("board") 
      .text(board.name) 
      .appendTo($boards); 
     }); 
     // This is where I'm trying to return the value 

     $('#board').change(function() { 
      document.getElementById("demo").innerHTML = $(".board:selected").val(); 
     }); 
    });