Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Seeking Assistance to Resolve 6 JSLint Warnings in Code

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

Code: Edit fiddle - JSFiddle - Code Playground

JavaScript:
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);

fix warnings.png

Full js part:

JavaScript:
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:
img1.png
 
Last edited:
Solution
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.
JavaScript:
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...
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.
JavaScript:
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);
  }
});
 
Solution
Which way is better? Edit fiddle - JSFiddle - Code Playground

JavaScript:
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);
    }
  });
 
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.
 

Buy us a coffee!

Back
Top Bottom