Buttons with JavaScript-CodePudding

I'm new in JavaScript, html and CSS and I'm trying to make a simple web page about Formula 1. In this page I was trying to make a small menu with 10 buttons, each one of them would lead you to a formula one team web page. I was doing using only html the first time but then realize I probably could do it using a loop in JavaScript and save a lot of lines and time, I have some thoughts about how to do it but I don't know how to execute the idea properly.

First I would create a list of 10 objects, each object with an image link and the web page of one of the 10 teams to use in the buttons:

var teams = [
    {name: mercedes, logo: teammercedes.icon, web: mercedes.com
    {name: ferrari, logo: ferrari.icon, web: ferrari.com}

Then would create a "for" (I'm guessing here)

    for(i = 0; i < 11; i  ){

    Now, I have no idea how to put this in JS but I here is what I want:

    mercedes is i = 0, so the JS create all the button tag structure using 
    the Mercedes logo I saved in the list above to decorate de button.

    then it goes to i = 1, which would be Ferrari, and the JS create again 
    all the button tag structure using the Ferrari logo saved in the list

}

I think by this method I would need to write the button structure once in the JS and, somehow, push the information inside of it 10 times, using 10 different index defined on a list

CodePudding user response：

You're on the right lines. Create an array of companies, and then iterate over the names to build some HTML, and then attach it to a menu. Use some CSS to style the buttons.

This example uses some modern JS techniques that aren't meant to scare you off, I promise. There's full documentation at the end of the answer, but I'll try and explain things along the way.

// The array of companies that you wanted
const companies = ['Mercedes', 'Renault', 'Saab', 'Fiat'];

// We cache the menu element using `querySelector`
const menu = document.querySelector('#menu');

// We assign a listener to the menu so when it is clicked
// we can redirect to a new page based on the the button id
menu.addEventListener('click', handleClick, false);

// For the buttons we can `map` over the array and create
// a new array of HTML that we `join` into a string at the end.
// I've used a dummy image here, but you can substitute in your
// own images for the img source
const buttons = companies.map(company => {
  const src = `https://dummyimage.com/100x30/b5d19d/000&text=${company}`;

  // Return some HTML that uses a class, a data attribute for
  // the company name, and the src image for the "button", and
  return `<img  data-id="${company.toLowerCase()}" src="${src}" />`;

// then `join` the new array up into one string
}).join('');

// Add the button HTML to the menu element
menu.innerHTML = buttons;

// When the listener is called
function handleClick(e) {

  // Grab the id value from the data attribute, and
  // the className from the element that was clicked
  // using destructuring assignment
  const { dataset: { id }, className } = e.target;

  // Check to see if the element that was click was a button
  if (className === 'company') {

    // And then navigate to your new page
    console.log(`http://example.com/${id}.html`);
    // window.location.href = `http://example.com/${id}.html`;
  }
}

.company { border: 1px solid white; border-radius: 10px; display: block; margin: 1em; cursor: pointer; }
.company:hover { border: 1px solid black; }

<div id="menu"></div>

Additional documentation

CodePudding user response：

You did not specify where to insert elements(DOM string) generated by JavaScript. So, the code below inserts elements into body tag as an example.

var teams = [
    {name: "mercedes", logo: "teammercedes.icon", web: "mercedes.com"},
    {name: "ferrari", logo: "ferrari.icon", web: "ferrari.com"}
];

let body = document.querySelector('body');
for (let i = 0; i < teams.length; i  ) {
    let link = teams[i].web;
    let logo = teams[i].logo;
    let name = teams[i].name;
    body.insertAdjacentHTML('afterbegin', `<a href="${link}"><img src="${logo}" alt="${name}" />${name}</a>`);
}

Although you think using JavaScript is an good way to list elements, I disagree. The JavaScript code runs in the browser. That means, the list of buttons will not be recognized until JavaScript runs.

Therefore, I believe it is better to return the list of buttons included in a HTML document.