单击项目时它没有响应

问题描述 投票：0回答：2

单击 F1 团队时应显示团队统计数据。它适用于车手，但不适用于 F1 车队。当在“车手排名”中单击车手并显示他们的统计数据，然后用户单击“车队排名”时，车手统计数据应该会消失。反之亦然，如果用户单击“Constructor Standings”中的团队并显示他们的统计数据，然后用户单击“Drivers Standings”，则团队统计数据应该会消失。

我的代码：
rankings.html 文件：

`<!DOCTYPE html>
<html>
<head>
<title>Rankings</title>
<style>
  .home {
    color: black; /* Change the color to black */
    text-decoration: none; /* Remove the underline */
  }
  </style>
  <style>
    .driver-link {
      color: black; /* Change the color to black */
      text-decoration: none; /* Remove the underline */
    }
    </style>
      <style>
    .team-link {
      color: black; /* Change the color to black */
      text-decoration: none; /* Remove the underline */
    }
    </style>
  
</head>
<body>
<h1><a class="home" href="home.html" >Formula1</a></h1>
<button id="standings-toggle" onclick="toggleStandings()">Constructor Standings</button>

<table id="driver-standings">
    <thead>
      <tr>
        <th>Driver</th>
        <th>Points</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a href="#" class="driver-link" data-driver="verstappen">Max Verstappen</a></td>
        <td>44</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="perez">Sergio Perez</a></td>
        <td>43</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="alonso">Fernando Alonso</a></td>
        <td>30</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="sainz">Carlos Sainz</a></td>
        <td>20</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="hamilton">Lewis Hamilton</a></td>
        <td>20</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="russel">George Russel</a></td>
        <td>18</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="stroll">Lance Stroll</a></td>
        <td>8</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="leclerc">Charles Leclerc</a></td>
        <td>6</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="bottas">Valtteri Bottas</a></td>
        <td>4</td>
      <tr>
        <td><a href="#" class="driver-link" data-driver="ocon">Esteban Ocon</a></td>
        <td>4</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="gasly">Pierre Gasly</a></td>
        <td>4</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="magnussen">Kevin Magnussen</a></td>
        <td>1</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="albon">Alexander Albon</a></td>
        <td>1</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="tsunoda">Yuki Tsunoda</a></td>
        <td>0</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="hulkenberg">Nico Hulkenberg</a></td>
        <td>0</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="sargeant">Logan Sargeant</a></td>
        <td>0</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="zhou">Zhou Guanyu</a></td>
        <td>0</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="vries">Nyck De Vries</a></td>
        <td>0</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="piastri">Oscar Piastri</a></td>
        <td>0</td>
      </tr>
      <tr>
        <td><a href="#" class="driver-link" data-driver="norris">Lando Norris</a></td>
        <td>0</td>
        
      </tr>
      
    </tbody>
  </table>
  <!-- Constructor -->
  <table id="constructor-standings" style="display: none;">
    <thead>
      <tr>
        <th>Team</th>
        <th>Points</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a href="#" class="team-link" data-driver="redbull">Red Bull</a></td>
        <td>87</td>
      </tr>
      <tr>
        <td><a href="#" class="team-link" data-driver="astonmartin">Aston Martin</a></td>
        <td>38</td>
      </tr>
      <tr>
        <td><a href="#" class="team-link" data-driver="mercedes">Mercedes</a></td>
        <td>38</td>
      </tr>
      <tr>
        <td><a href="#" class="team-link" data-driver="ferrari">Ferrari</a></td>
        <td>26</td>
      </tr>
      <tr>
        <td><a href="#" class="team-link" data-driver="alpine">Alpine</a></td>
        <td>8</td>
      </tr>
      <tr>
        <td><a href="#" class="team-link" data-driver="alfaromeo">Alfa Romeo</a></td>
        <td>4</td>
      </tr>
      <tr>
        <td><a href="#" class="team-link" data-driver="haas">Haas</a></td>
        <td>1</td>
      </tr>
      <tr>
        <td><a href="#" class="team-link" data-driver="williams">Williams</a></td>
        <td>1</td>
      </tr>
      <tr>
        <td><a href="#" class="team-link" data-driver="alphatauri">AlphaTauri</a></td>
        <td>0</td>
      <tr>
        <td><a href="#" class="team-link" data-driver="mclaren">McLaren</a></td>
        <td>0</td>
      </tr>
    </tbody>
  </table>
  <script type="text/javascript" src="rankings.js"></script>
  <div id="driver-profile"></div>
  <div id="team-profile"></div>
  <script>
    const driverProfiles = {
      verstappen: {
        name: "Max Verstappen",
        image: "verstappen.png",
        team: "Red Bull",
        wins: 36,
        podiums: 79,
        chamionships: 2
      },
      perez: {
        name: "Sergio Perez",
        image: "perez.png",
        team: 'Red Bull Racing',
            wins: 5,
            podiums: 28,
            chamionships: 0
        },
        hamilton: {
            name: "Lewis Hamilton",
            image: "hamilton.png",
            team: 'Mercedes',
            wins: 103,
            podiums: 191,
            chamionships: 7,
        },
        russel: {
            name: "George Russel",
            image: "russel.png",
            team: 'Mercedes',
            wins: 1,
            podiums: 9,
            chamionships: 0,
        },
        leclerc: {
            name: "Charles Leclerc",
            image: "leclerc.png",
            team: 'Ferrari',
            wins: 5,
            podiums: 24,
            chamionships: 0,
        },
        sainz: {
            name: "Carlos Sainz",
            image: "sainz.png",
            team: 'Ferrari',
            wins: 1,
            podiums: 15,
            chamionships: 0,
        },
        alonso: {
            name: "Fernando Alonso",
            image: "alonso.png",
            team: 'Aston Martin',
            wins: 32,
            podiums: 100,
            chamionships: 2,
        },
        stroll: {
            name: "Lance Stroll",
            image: "stroll.png",
            team: 'Aston Martin',
            wins: 0,
            podiums: 3,
            chamionships: 0,
        },
        gasly: {
            name: "Pierre Gasly",
            image: "gasly.png",
            team: 'Alpine',
            wins: 1,
            podiums: 3,
            chamionships: 0,
        },
        ocon: {
            name: "Esteban Ocon",
            image: "ocon.png",
            team: 'Alpine',
            wins: 1,
            podiums: 3,
            chamionships: 0,
        },
        magnussen: {
            name: "Kevin Magnussen",
            image: "magnussen.png",
            team: 'Haas',
            wins: 0,
            podiums: 1,
            chamionships: 0,
        },
        hulkenberg: {
            name: "Nico Hulkenberg",
            image: "hulkenberg.png",
            team: 'Haas',
            wins: 0,
            podiums: 0,
            chamionships: 0,
        },
        tsunoda: {
            name: "Yuki Tsunoda",
            image: "tsunoda.png",
            team: 'Alphatauri',
            wins: 0,
            podiums: 0,
            chamionships: 0,
        },
        vries: {
            name: "Nick De Vries",
            image: "vries.png",
            team: 'Alphatauri',
            wins: 0,
            podiums: 0,
            chamionships: 0,
        },
        bottas: {
            name: "Valtteri Bottas",
            image: "bottas.png",
            team: 'Alfa Romeo',
            wins: 10,
            podiums: 1,
            chamionships: 1,
        },
        zhou: {
            name: "Zhou Guanyu",
            image: "zhou.png",
            team: 'Alfa Romeo',
            wins: 0,
            podiums: 67,
            chamionships: 0,
        },
        norris: {
            name: "Lando Norris",
            image: "norris.png",
            team: 'McLaren',
            wins: 0,
            podiums: 6,
            chamionships: 0,
        },
        piastri: {
            name: "Oscar Piastri",
            image: "piastri.png",
            team: 'McLaren',
            wins: 0,
            podiums: 0,
            chamionships: 0,
        },
        albon: {
            name: "Alexander Albon",
            image: "albon.png",
            team: 'Williams',
            wins: 0,
            podiums: 2,
            chamionships: 0,
        },
        sargeant: {
            name: "Logan Sargeant",
            image: "sargeant.png",
            team: 'Williams',
            wins: 0,
            podiums: 0,
            chamionships: 0,
        }
    };

    const teamProfiles = {
        redbull: {
            name: "Red Bull",
            image: "",
            driver: 'Sergio Perez',
            driver2: 'Max Verstappen',
            wins: 94,
            podiums: 238,
            con_chamionships: 5,
            dri_chamionships: 6,
            engine: 'Honda RBPT'
        },
        astonmartin: {
            name: "Aston Martin",
            image: "",
            driver: 'Fernando Alonso',
            driver2: 'Lance Stroll',
            wins: 0,
            podiums: 3,
            con_chamionships: 0,
            dri_chamionships: 0,
            engine: 'Mercedes'
        },
        mercedes: {
            name: "Mercedes",
            image: "",
            driver: 'Lewis Hamilton',
            driver2: 'George Russel',
            wins: 125,
            podiums: 281,
            con_chamionships: 8,
            dri_chamionships: 9,
            engine: 'Mercedes'
        },
        ferrari: {
            name: "Ferrari",
            image: "",
            driver: 'Charles Leclerc',
            driver2: 'Carlos Sainz',
            wins: 243,
            podiums: 804,
            con_chamionships: 16,
            dri_chamionships: 15,
            engine: 'Ferrari'
        },
        alpine: {
            name: "Alpine",
            image: "",
            driver: 'Esteban Ocon',
            driver2: 'Pierre Gasly',
            wins: 1,
            podiums: 2,
            con_chamionships: 0,
            dri_chamionships: 0,
            engine: 'Renault'
        },
        alfaromeo: {
            name: "Alfa Romeo",
            image: "",
            driver: 'Valtteri Bottas',
            driver2: 'Zhou Guanyu',
            wins: 10,
            podiums: 26,
            con_chamionships: 2,
            dri_chamionships: 0,
            engine: 'Ferrari'
        },
        haas: {
            name: "Haas",
            image: "",
            driver: 'Kevin Magnussen',
            driver2: 'Nico Hulkenberg',
            wins: 0,
            podiums: 5,
            con_chamionships: 0,
            dri_chamionships: 0,
            engine: 'Ferrari'
        },
        williams: {
            name: "Williams",
            image: "",
            driver: 'Alexander Albon',
            driver2: 'Logan Sargeant',
            wins: 114,
            podiums: 313,
            con_chamionships: 9,
            dri_chamionships: 7,
            engine: 'Mercedes'
        },
        alphatauri: {
            name: "AlphaTauri",
            image: "",
            driver: 'Yuki Tsunoda',
            driver2: 'Nyck De Vries',
            wins: 1,
            podiums: 2,
            con_chamionships: 0,
            dri_chamionships: 0,
            engine: 'Honda RBPT'
        },
        mclaren: {
            name: "McLaren",
            image: "",
            driver: 'Lando Norris',
            driver2: 'Oscar Piastri',
            wins: 183,
            podiums: 494,
            con_chamionships: 8,
            dri_chamionships: 12,
            engine: 'Mercedes'
        }
    };
  
    const driverProfileDiv = document.getElementById("driver-profile");
    const teamProfileDiv = document.getElementById("team-profile");
  
    document.querySelectorAll(".driver-link").forEach((link) => {
      link.addEventListener("click", (event) => {
        event.preventDefault();
  
        const driverName = link.dataset.driver;
        const driverProfile = driverProfiles[driverName];
  
        driverProfileDiv.innerHTML = `
          <h2>${driverProfile.name}</h2>
          <img src="${driverProfile.image}" alt="${driverProfile.name}">
          <p>${driverProfile.description}</p>
          <h2>Team: ${driverProfile.team}</h2>
          <h2>Wins: ${driverProfile.wins}</h2>
          <h2> Podiums: ${driverProfile.podiums}</h2>
          <h2>Championships: ${driverProfile.chamionships}</h2>
        `;
      });
    });
    document.querySelectorAll(".team-link").forEach((link) => {
      link.addEventListener("click", (event) => {
        event.preventDefault();
  
        const teamName = link.dataset.team;
        const teamProfile = teamProfiles[teamName];
  
        teamProfileDiv.innerHTML = `
          <h2>${teamProfile.name}</h2>
          <img src="${teamProfile.image}" alt="${teamProfile.name}">
          <p>${teamProfile.description}</p>
          <h2>Driver: ${teamProfile.player}</h2>
          <h2>Driver: ${teamProfile.player2}</h2>
          <h2>Wins: ${teamProfile.wins}</h2>
          <h2> Podiums: ${teamProfile.podiums}</h2>
          <h2>Constructors Championships: ${teamProfile.con_chamionships}</h2>
          <h2>Drivers Championships: ${teamProfile.dri_chamionships}</h2>
          <h2>Power Unit: ${teamProfile.engine}</h2>
        `;
      });
    });

    
    function toggleStandings() {
        var driverStandings = document.getElementById("driver-standings");
        var constructorStandings = document.getElementById("constructor-standings");
        var standingsToggle = document.getElementById("standings-toggle");

        if (driverStandings.style.display === "none") {
            driverStandings.style.display = "table";
            constructorStandings.style.display = "none";
            standingsToggle.innerHTML = "Constructor Standings";
        } else {
            driverStandings.style.display = "none";
            constructorStandings.style.display = "table";
            standingsToggle.innerHTML = "Driver Standings";
        }
    }
  </script>
</body>
</html>`

rankings.js 文件：

`var driverNameLinks = document.querySelectorAll('.driver-link');
driverNameLinks.forEach(function(link) {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    var driverName = e.target.dataset.driver;
    showDriverProfile(driverName);
  });
});

var teamNameLinks = document.querySelectorAll('.team-link');
teamNameLinks.forEach(function(link) {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    var teamName = e.target.dataset.team;
    showTeamProfile(teamName);
  });
});


const constructorChampionship = document.getElementById('constructor-championship');

constructorChampionship.addEventListener('click',);
`
javascript html button
2个回答
0
投票

你应该在文件 rankings.html 的末尾导入 rankings.js 并在事件监听器上设置函数。

0
投票

单击团队链接时，处理程序需要 

data-team
属性中的团队名称：

  link.addEventListener('click', function(e) {
    e.preventDefault();
    var teamName = e.target.dataset.team; // <-------
    showTeamProfile(teamName);
  });

但是在您的 HTML 中，链接使用 

data-driver
属性：

      <tr>
        <td><a href="#" class="team-link" data-driver="mercedes">Mercedes</a></td>
        <td>38</td>
      </tr>

所以 

teamName
将是空的，您会在控制台中收到错误消息

未捕获的类型错误：teamProfile 未定义

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.