How can I convert the displayed football teams to hyperlinks going to the teams official homepage?-CodePudding

I have a task saying it should be possible to click on the football teams name and then be directed to the teams official site. I get both the URL and the football teams names from API.

I've tried to create it as hyperlink, but it doesen't turn out to be the way to do it - I am new to programming. What's the approach? Here's my code:

    export function getMatchData() {

    // fetching data

return fetch('https://stryk.herokuapp.com/strycket2022')
.then(response => response.json())
.then(function (data) {

  // Creating arrays
  const gameArray = data.playedGames;
  let gameInfo = [];

  // retreiving data from API and insert it in new array 
  gameArray.forEach((gamePlayed) => {
    const gameNumber = gamePlayed.gameNumber
    const homeTeam = gamePlayed.teams[1].name;
    const awayTeam = gamePlayed.teams[2].name;
    const homeWeb = gamePlayed.teams[1].homepage;
    const awayWeb = gamePlayed.teams[2].homepage;
    const outcome = gamePlayed.outcome;

    gameInfo.push({ gameNumber, outcome, homeTeam, awayTeam, homeWeb, awayWeb });
  });



  // returning new array with desired data

  return gameInfo;
});

Fetch data is sent to index.js:

    import { getMatchData } from "./fetchFootballGames.js";

    // assigning the table to a variable

    let table = document.getElementById('table');


   // call function

   getMatchData().then(insertFootballGame);



   // Creating functions

   /**
   * Function that takes data and show it in the table 
   * 
   */
    function insertFootballGame(gameData) {

    for (let i = 0; i < gameData.length; i  ) {

       // Values

    const number = gameData[i].gameNumber; // number to show in the first td
  const tr = document.createElement('tr'); // creating tr element in the table
let a1 = document.createElement('a');   // creating anchor element
let a1Text = document.createTextNode(gameData[i].homeTeam);

// creating 2 td elements in the tr element
let td1 = tr.appendChild(document.createElement('td'));
let td2 = tr.appendChild(document.createElement('td'));


a1.appendChild(a1Text);
a1.href = gameData[i].homeWeb;
console.log(a1); // i see the created hyperlinks in console, but displays only with the names of the website on the webpage? 

// Inserting data from Api on correct td spot
td1.innerText = number;
td2.innerText = a1   " VS "   gameData[i].awayTeam;



// adding the checkbox

const checkBox = createCheckBox();


// Adding cells for checkmarks to display
if (gameData[i].outcome === '1') {
  tr.insertCell();
  tr.insertCell();
  const cell = tr.insertCell(2);
  cell.append(checkBox);
}

if (gameData[i].outcome === 'X') {
  tr.insertCell();
  tr.insertCell();
  const cell = tr.insertCell(3);
  cell.append(checkBox);
}

if (gameData[i].outcome === '2') {
  tr.insertCell();
  tr.insertCell();
  const cell = tr.insertCell(4);
  cell.append(checkBox);
}




// making a row in the table.

table.appendChild(tr);
}



}



    // Creates a checkBox based on the template in the html file
    function createCheckBox() {
    let checkBox = document.createElement('span');
    checkBox.setAttribute('class', 'checkmark');

    let stem = document.createElement('div');
   stem.setAttribute('class', 'stem');

   let kick = document.createElement('div');
   kick.setAttribute('class', 'kick');

   checkBox.appendChild(stem);
   checkBox.appendChild(kick);

   return checkBox;
 }

CodePudding user response：

It is due to this line :

td2.innerText = a1   " VS "   gameData[i].awayTeam;

With the innerText you're converting your anchor into text. So you probably want to use appendChild.

For the easy way :

td2.appendChild(a1);
td2.appendChild(document.createTextNode(" VS "   gameData[i].awayTeam))