JavaScript Seeking Assistance to Resolve 6 JSLint Warnings in Code

[htmlcssjavascript28]

I am needing help figuring out how to fix 6 jlsint warnings in the code.

Code: Edit fiddle - JSFiddle - Code Playground

const button = document.createElement("button");
            button.className = station.buttonClass;
            button.textContent = station.title;
            button.classList.add("linkButton", "btnC-primary", "btnC");
            button.setAttribute("data-destination", "#lb"); // Added this line
            buttonContainer.appendChild(button);

Full js part:

const buttonContainer = document.querySelector(".buttonContainerB");

  // Create audio and button elements for each station
  radioStations.forEach(function(station) {
    if (station.src) {
      // Create audio element
      const audio = document.createElement("audio");
      audio.title = station.title;
      audio.preload = "none";

      const source = document.createElement("source");
      source.src = station.src;
      source.type = "audio/mpeg";

      audio.appendChild(source);

      // Add audio element to the body
      document.body.appendChild(audio);

      // Create button element
      const button = document.createElement("button");
      button.classList.add("playButtonB", "btnB-primary", "btnB");
      button.dataset.src = station.src;
      button.textContent = station.title;

      // Add button to the container
      buttonContainer.appendChild(button);
    } else if (station.buttonClass) {


      const button = document.createElement("button");
      button.className = station.buttonClass;
      button.textContent = station.title;
      button.classList.add("linkButton", "btnC-primary", "btnC");
      button.setAttribute("data-destination", "#lb"); // Added this line
      buttonContainer.appendChild(button);
    }
  });

The 6 Warnings:

 

[Johna]

Not sure why it's giving warnings for this; the code seems valid to me.

The button variables in both conditional statements seem to be the same, so you could just declare the button variable before the conditional statements. This will probably remove all of the warnings.

const buttonContainer = document.querySelector(".buttonContainerB");

// Create audio and button elements for each station
radioStations.forEach(function(station) {
  const button = document.createElement("button");

  if (station.src) {
    // Create audio element
    const audio = document.createElement("audio");
    audio.title = station.title;
    audio.preload = "none";

    const source = document.createElement("source");
    source.src = station.src;
    source.type = "audio/mpeg";

    audio.appendChild(source);

    // Add audio element to the body
    document.body.appendChild(audio);

    // Create button element
    button.classList.add("playButtonB", "btnB-primary", "btnB");
    button.dataset.src = station.src;
    button.textContent = station.title;

    // Add button to the container
    buttonContainer.appendChild(button);
  } else if (station.buttonClass) {

    button.className = station.buttonClass;
    button.textContent = station.title;
    button.classList.add("linkButton", "btnC-primary", "btnC");
    button.setAttribute("data-destination", "#lb"); // Added this line
    buttonContainer.appendChild(button);
  }
});

 

[htmlcssjavascript28]

Which way is better? Edit fiddle - JSFiddle - Code Playground

radioStations.forEach(function(station) {
    let button;
    if (station.src) {
      // Create audio element
      const audio = document.createElement("audio");
      audio.title = station.title;
      audio.preload = "none";


      const source = document.createElement("source");
      source.src = station.src;
      source.type = "audio/mpeg";


      audio.appendChild(source);


      // Add audio element to the body
      document.body.appendChild(audio);


      // Create button element
      button = document.createElement("button");
      button.classList.add("playButtonB", "btnB-primary", "btnB");
      button.dataset.src = station.src;
      button.textContent = station.title;


      // Add button to the container
      buttonContainer.appendChild(button);
    } else if (station.buttonClass) {
      button = document.createElement("button");
      button.className = station.buttonClass;
      button.textContent = station.title;
      button.classList.add("linkButton", "btnC-primary", "btnC");
      button.setAttribute("data-destination", "#lb"); // Added this line
      buttonContainer.appendChild(button);
    }
  });

 

[Johna]

Both will work, but I see no reason to first declare the variable, and then assign a value to it later, when the value is always going to be the same.