.indexOf（）和window.open

Question

我需要使用indexOf()和window.open來生成以下圖片：

• 我運動員的名字，以及
• 他們的照片，以及
• 簡短的簡歷。

我無法使全局變量正常工作。

當我單擊表格中運動員的姓名之一時，會看到一個新屏幕，但屏幕上顯示undefined運動員姓名的顯示位置。

外部JavaScript：

我的全局變量和嘗試創建窗口的嘗試。

function teamStats(id) {
  var myWin = window.open("","", "height=200, width=500");
  var q = athleteNames.indexOf(id);myWin.document.write(
    "<p><b>Name</b> -   " + athleteNames[q] + </p>");
}

var athleteNames = ["Michael Phelps","Nathan Adrian",
  "Cody Miller","Ryan Murphy","Simone Manuel","Kathleen Baker",
  "Dana Vollmer","Lilly King"];
var athleteIds = ["MP","NA","CM","RM","SM","KB","DV","LK"]; 

我的HTML代碼

只是我的代碼底部的一個示例。 我有表，main，div和腳本的開始標記。

        <td id="LK" onclick="teamStats(id)">Lilly King</td>
        <td>19</td>
        <td>5'4"</td>
        <td>154</td>
        <td> 
          <span style="color:gold">Gold</span> Women's 4x100m medley <br>
          <span style="color:gold">Gold</span> Women's 100m backstroke <br>
        </td> 
      </tr> 
    </table>
  </main>
</div>
<script>
  teamStats();
</script>

Answer 1

1）您應該重新組織“數據庫”-將所有數據放在一個變量中。

2）比indexOf更快地獲取對象的屬性

Java腳本

var athletes = {
    MP: { // <- property is ID of athlete in your "database"
        name: "Michael Phelps", // <- fileds of data about your athlete
        pic: "http://placehold.it/350x150",
        bio: "Info about Michael Phelps"
    },
    NA: {
        name: "Nathan Adrian",
        pic: "http://placehold.it/350x150",
        bio: "Info about Nathan Adrian"
    }
};
function teamStats(id) {
    var athlete = athletes(id);
    var myWin = window.open("","", "height=200, width=500");
    myWin.document.write("<p><b>Name</b> -   " + athlete.name + "</p>" +
        "<img src='" + athlete.pic + "' />" +
        "<p>" + athlete.bio + "</p>");
}

的HTML

<span id="MP" onclick="teamStats(id)">Michael Phelps</span>
<span id="NA" onclick="teamStats(id)">Nathan Adrian</span>