Buttons with JavaScript

Question

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

Answer 1

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 class="company" 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

• querySelector

• map

• addEventListener

• Template/string literals

• Destructuring assignment

• join

• Data attributes

Answer 2

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.