Workaround step 4

I have tried repeatedly on step 4 but i can’t seem to get it right. it says after completing step 4 that i should see my buttons rendered but I don’t. link below.

here is my code for step 4

<!DOCTYPE html>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index.css" />
   <script src="main.js" type ="module" defer></script>
     <!-- The roles and companies <section>s are dynamically created in main.js with renderInputButtons() -->
      <section id="resultsContainer">
        <p id="salarySelected"> ... </p>
        <p id="salaryAverageByRole"> ... </p>
        <p id="salaryAverageByCompany"> ... </p>
        <p id="salaryAverageIndustry"> ... </p>


// TODO: Add your import statements here.
import {getRoles, getCompanies;} from './salaryData.js'
// TODO: Get the companies and roles using the salaryData module.
const companies = getCompanies();
const roles = getRoles();
// Create input buttons for every company and role represented in the data.

renderInputButtons(companies, 'company');
renderInputButtons(roles, 'role');

// This function will create a new <section> with radio
// inputs based on the data provided in the labels array.
function renderInputButtons(labels, groupName) {
  const container = document.createElement('section');
  container.setAttribute('id', `${groupName}Inputs`);

  let header = document.createElement('h3');
  header.innerText = `Select a ${groupName}`;

  labels.forEach(label => { // For each label...
    // Create the radio input element.
    let divElement = document.createElement('div');
    divElement.setAttribute('class', 'option');

    let inputElement = document.createElement('input');
    inputElement.setAttribute('type', 'radio');
    inputElement.setAttribute('name', groupName);
    inputElement.setAttribute('value', label);

    // Create a label for that radio input element.
    let labelElement = document.createElement('label');
    labelElement.setAttribute('for', label);
    labelElement.innerText = label;

    // Update the results when the input is selected.
    inputElement.addEventListener('click', updateResults);



function updateResults(){
  // Get the current selected company and role from the radio button inputs.
  const company = document.querySelector("input[name='company']:checked").value;
  const role = document.querySelector("input[name='role']:checked").value;

  // If either the company or role is unselected, return.
  if (!company || !role) { return; }

  // TODO: Use the workAroundModule functions to calculate the needed data.
  const averageSalaryByRole = 0;
  const averageSalaryByCompany = 0;
  const salary = 0;
  const industryAverageSalary = 0;

  // Render them to the screen.
  document.getElementById('salarySelected').innerText = `The salary for ${role}s at ${company} is \$${salary}`;
  document.getElementById('salaryAverageByRole').innerText = `The industry average salary for ${role} positions is \$${averageSalaryByRole}`;
  document.getElementById('salaryAverageByCompany').innerText = `The average salary at ${company} is \$${averageSalaryByCompany}`;
  document.getElementById('salaryAverageIndustry').innerText = `The average salary in the Tech industry is \$${industryAverageSalary}`;


const salaryData = [
  { role: 'CTO', company: 'Big Data Inc.', salary: 320000},
  { role: 'Technical Lead', company: 'Big Data Inc.', salary: 230000},
  { role: 'Software Engineer II', company: 'Big Data Inc.', salary: 180000},
  { role: 'Software Engineer I', company: 'Big Data Inc.', salary: 140000},
  { role: 'CTO', company: 'Medium Data Inc.', salary: 215000},
  { role: 'Technical Lead', company: 'Medium Data Inc.', salary: 165000},
  { role: 'Software Engineer II', company: 'Medium Data Inc.', salary: 140000},
  { role: 'Software Engineer I', company: 'Medium Data Inc.', salary: 115000},
  { role: 'CTO', company: 'Small Data Inc.', salary: 175000},
  { role: 'Technical Lead', company: 'Small Data Inc.', salary: 135000},
  { role: 'Software Engineer II', company: 'Small Data Inc.', salary: 115000},
  { role: 'Software Engineer I', company: 'Small Data Inc.', salary: 95000},

const getRoles = () => {
  return ['CTO', 'Technical Lead', 'Software Engineer II', 'Software Engineer I'];

const getCompanies = () => {
  return ['Big Data Inc.', 'Medium Data Inc.', 'Small Data Inc.'];

const getDataByRole = role => {
  return salaryData.filter(obj => obj.role === role);

const getDataByCompany = company => {
  return salaryData.filter(obj => === company);
export {getRoles, getCompanies, getDataByRole, getDataByCompany};
export default salaryData;

any advice would be helpful. used jsfiddle and reread the lessons and i cannot figure out where i went wrong.

Never-mind. i figured out that there is a bug on the page and its not letting my content render. stupid reason for something not to work.

Hi I have the same problem. Did you finished the project? How did you get past the bug?

Yes. I figured out what I was doing wrong. There is a wanderlust walkthrough on YouTube. It is difficult to describe. I started over and used the vid for reference.