.indexOf() and 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"]; 

My HTML code

只是我代码底部部分的一个示例。我有table、main、div和script的开始标签。

        <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更快获得对象属性

Javascript

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>