Category: javascript

Can css or javascript pick automatically the main color of an image for example? like on spotify where the website /app automatically adapts to whatever is the color of the artwork of an album

As for now i’m using a var that I set individually in each html pages:

    <style>:root {
  --primary-color: #9dff00;</style>

and indeed then in my css:

    color: var(--primary-color);

I am executing in the google chrome console the following script:

the button click suppose to call an API, but in the API call, I see alwazs the some ID, insted of getting the other two:

I did similar code with a foreach, this time I am using a promise with timeout.
Not sure what to do to resolve this, looks like the foreach goes too fast before the changes are applied to the html and the click even is triggered 3 times with the first ID of the array and it suppose to to have 3 different calls.

Any suggestion?

I’m looking for a way to do a bulk update on my MariaDB. I use the Node.js mariaDB plugin and HAPI.js with Handlebars. I’m very new at javascript but got already a far way on my little project to do some research on working dogs (Belgium Malinois). It’s for myself to learn working with Javascript, Node and MariaDB.

My issue:
I have a webpage with multiple parameters to edit through a form.

The database: aped_db.parameters

TABLE `parameters` (
    `id` INT(11) NOT NULL AUTO_INCREMENT,
    `name` VARCHAR(50) NOT NULL COLLATE 'utf8mb4_general_ci',
    `description` VARCHAR(50) NOT NULL COLLATE 'utf8mb4_general_ci',
    `opt0` VARCHAR(50) NOT NULL DEFAULT 'Unknown' COLLATE 'utf8mb4_general_ci',
    `opt1` VARCHAR(50) NOT NULL DEFAULT 'Very bad' COLLATE 'utf8mb4_general_ci',
    `opt2` VARCHAR(50) NOT NULL DEFAULT 'Bad' COLLATE 'utf8mb4_general_ci',
    `opt3` VARCHAR(50) NOT NULL DEFAULT 'Ok' COLLATE 'utf8mb4_general_ci',
    `opt4` VARCHAR(50) NOT NULL DEFAULT 'Good' COLLATE 'utf8mb4_general_ci',
    `opt5` VARCHAR(50) NOT NULL DEFAULT 'Very good' COLLATE 'utf8mb4_general_ci',
    `multiplier` FLOAT NULL DEFAULT '1',
    PRIMARY KEY (`id`) USING BTREE,
    UNIQUE INDEX `name` (`name`) USING BTREE
)

The HTML code in short

{{#each parlist}}
    <input type="hidden" name="id" value="{{this.id}}" form="form-edit">
    <td style="text-align:center;">{{this.id}}</td>
    <td><input type="text" name="name" value="{{this.name}}" form="form-edit"></td>
    <td><input type="text" name="description" value="{{this.description}}" form="form-edit"></td>
    <td><input type="text" name="opt0" value="{{this.opt0}}" form="form-edit"></td>
    <td><input type="text" name="opt0" value="{{this.opt1}}" form="form-edit"></td>
    <td><input type="text" name="opt0" value="{{this.opt2}}" form="form-edit"></td>
    <td><input type="text" name="opt0" value="{{this.opt3}}" form="form-edit"></td>
    <td><input type="text" name="opt0" value="{{this.opt4}}" form="form-edit"></td>
    <td><input type="text" name="opt0" value="{{this.opt5}}" form="form-edit"></td>
    <td><input type="text" name="multiplier" value="{{this.multiplier}}" form="form-edit"></td>
{{/each}}

The received payload to process into the table parameters:

req.payload = {
   id: [ '1', '3', '' ],
   name: [ 'Social', 'Work ethic', 'Dominance' ],
   description: [ 'Desc 1', 'Desc 2', 'Desc 3'],
   opt0: [ 'Unknown', 'Unknown', 'Unknown' ],
   opt1: [ 'Very bad', 'Very bad', 'Very bad' ],
   opt2: [ 'Bad', 'Bad', 'Bad' ],
   opt3: [ 'Ok', 'Ok', 'Ok' ],
   opt4: [ 'Good', 'Good', 'Good' ],
   opt5: [ 'Very good', 'Very good', 'Very good' ],
   multiplier: [ '1', '1', '1' ]
}

In the above payload 2 parameters are existing ones, and the third one needs to be a new INSERT.
The issue I have is, that for each key there is an array. I would have expected an array for each row.

Parameters id ‘1’ & ‘3’ are existing ones to update, par id ” is a new one to insert.

Because the payload gives an array for each key, I’m not sure how to proceed. How to convert the payload to something more usable.

I tried looking on google, but didn’t find a good example that I could follow (that I understand). I’m very new at this.

Anyone can put me on the right track?

Thx

I created a button on my html page
So, In index.html:

<button class="btn btn-sm btn-remove delete-product" data-product="{{product_id}}"><i class="fas fa-trash-alt" ></i></button>

When I am clicking on this button it is not working In function.js:

$(".delete_product").on("click",function(){
    let product_id=$(this).attr("data_product")
    let this_val=$(this)


    console.log("Product ID:", product_id);
}

and the html page is also linked with js file

So that’s it… What is wrong here???

-> In this pdf the content is starting without any top margin, looking for an solution to add top margin.

-> I tried the below code and i’m looking for a solution to add “top_left_margin= 15” to the downloaded pdf file.but the margin is not getting added.

HTML :-

paragraph 1

paragraph 2

paragraph 3

paragraph 4

paragraph 5

SCRIPT:-

const section: any = document.getElementById(‘summaryId’);

var HTML_Width = section.scrollWidth;
        var HTML_Height = section.scrollHeight;
        var top_left_margin = 35;
        var PDF_Width = HTML_Width + (top_left_margin * 2);
        var PDF_Height = (PDF_Width * 1.2) + (top_left_margin * 2);
        var canvas_image_width = HTML_Width;
        var canvas_image_height = HTML_Height;

        var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
     
        html2canvas(section, { allowTaint: true }).then(function (canvas) {
          var imgData = canvas.toDataURL('image/png');
          var imgWidth = 210;
          var pageHeight = 299;
          var imgHeight = canvas.height * imgWidth / canvas.width;
          var heightLeft = imgHeight;
          var top_left_margin = 15;
          var doc = new jspdf.jsPDF();
          var position = 0;
     
          doc.addImage(imgData, 'PNG',0, position, imgWidth, imgHeight+30);
          heightLeft -= pageHeight;
    
          while (heightLeft >= 0) {
              position = heightLeft - imgHeight; 
              doc.addPage();
              doc.addImage(imgData, 'PNG',0,position, imgWidth, imgHeight+30);
              heightLeft -= pageHeight;
          }
        doc.save("Dashboard.pdf");
        });
         
      }

I am trying to sort the <td>‘s inside a <tr> based on the text content.

sortedCells = Array.from(tr.cells).sort((a,b) => b.textContent - a.textContent);
const cellsLength = tr.cells.length;
for(i = 0; i < cellsLength; i++) {
  const cell = tr.cells[i];
  tr.replaceChild(sortedCells[i], cell);
}

When this code is executed, it will shorten the tr.cells by one, so in one of the replaceChild() calls, something goes wrong, as a result, i will get a shorter <tr> i cant figure out why.

Super strange one that I can’t quite figure out…

I have a server side component, which gets data and then passes it down to the client component – pretty standard.

Heres the strange thing… if I log the data on the server side it’s all fine as expected. I then pass it down to the client, which weirdly receives only “children” props (which aren’t passed anyway..). If I render the children, then I actually get passed the props which I passed down, and children are no longer passed? It’s obviously not intentional, and I end up with my component being rendered twice as I assume one time its being fed to itself? Super strange

Here’s my code

Server side component:

// SERVER SIDE COMPONENT

'user server';

const Page = async () => {
    const news = await getAllNews();
    console.log(news)
    //correctly logs news in the server console
    return <Template news={news}/>
}

export default Page;


//CLIENT SIDE COMPONENT WHERE NEWS IS NOT PASSED

'use client';

const PageTemplate = (props: any) => {
    console.log(props);
    // console logs children, which is a React component
    return (
        <S.PageTemplateWrapper>
            Template
        </S.PageTemplateWrapper>
    )
}

export default PageTemplate;


//CLIENT SIDE COMPONENT WHERE NEWS IS  PASSED

'use client';

const PageTemplate = (props: any) => {
    console.log(props);
    // console logs children, then news (separately). Renders two instances of "Template"
    return (
        <S.PageTemplateWrapper>
            Template
            {props.children}
        </S.PageTemplateWrapper>
    )
}

export default PageTemplate;

So where is props.children coming from?
Why is my data only passed when I render props.children?

I want to create an animation for an .svg component using the React Framer Motion library so that it rotates 360 degrees. However, I don’t want the anchor point to be in the center of the .svg, I want it to be a custom point “x% y%” off the top left corner. I have tried something like the following (inside the .svg file), however it doesn’t work (it still just rotates about the center). What are other methods to try, or what might be missing from the current implementation?

  <motion.path
    id="Needle"
    d=...
    fill=...
    initial={{ opacity: 1, rotate: 0, transformOrigin: "9% 75%" }} // Initial animation state
    animate={{ opacity: 1, rotate: 360 }} // Target animation state
    transition={{ rotate: { duration: 2, delay: 0 } }} // Animation duration and delay
  />

I will test my redux-sagas, and stuck by mocking my api requests.
The scenario is like this:

I have a GraphQL API and each request is capsuled (axios) in a requestApiUtil.

like

/path/api/sampleOneApiRequest.js

import { requestApi } from 'utils';

export const sampleOneApiRequest = ({ arg1 }) => requestApi.query(`
  sampleData {
    id
  }
`)

/path/api/sampleTwoApiRequest.js

import { requestApi } from 'utils';

export const sampleTwoApiRequest = ({ arg1 }) => requestApi.query(`
  otherSampleData {
    id
  }
`)

/path/api/index.js

export * from './sampleOneApiRequest';
export * from './sampleTwoApiRequest';

the saga that i like to test, looks like this

/path/redux/saga/sampleSaga/sampleSaga.js

import { all, put } from 'redux-saga/effects';
import { successAction, failureAction } from 'path/redux/action';
import { sampleOneApiRequest, sampleTwoApiRequest } from 'path/api';

export function* sampleSaga({ payload }) {
  const switch = payload ? payload.switch : false;
  try {
    let response;
    if (switch) {
      response = (yield sampleOneApiRequest());
    } else {
      response = (yield sampleTwoApiRequest());
    }

    if (response.errors) {
      return yield put(failureAction(response.errors));
    }

    yield put(successAction(response.data));
  } catch (error) {
    yield put(failureAction(error));
  }
}

Now to the problem, my test to the saga looks like this:

/path/redux/saga/sampleSaga/sampleSaga.test.js

import { sampleSaga } from './sampleSaga;
import { sampleOneApiRequest, sampleTwoApiRequest } from 'path/api';
import { successAction } from 'path/redux/action';
import { put } from 'redux-saga/effects';

jest.mock('path/api', () => ({
  sampleOneApiRequest: async () => { id: 'sample1' },
  sampleTwoApiRequest: async () => { id: 'sample2' }
}));

descripe('test sampleSaga', () => {
  
  if('test sampleSaga switch false', () => {
    const generator   = sampleSaga({ payload: { switch: false } });
    const apiResponse = { data: { id: 'sample1' } };
    
    expect(generator.next().value).toEqual(sampleOneApiRequest());
    expect(generator.next(apiResponse).value).toEqual(put(successAction(apiResponse)))
  });
  
  if('test sampleSaga switch true', () => {
    const generator   = sampleSaga({ payload: { switch: true } });
    const apiResponse = { data: { id: 'sample2' } };
    
    expect(generator.next().value).toEqual(sampleTwoApiRequest());
    expect(generator.next(apiResponse).value).toEqual(put(successAction(apiResponse)))
  });

});

The problem is, that the second triggert saga, generate a request to the backend, but i aspect the the request to the backend will be mocked. The frist one will mocked perfectly, when i change the order of both tests, always still the second one (in order) will be call to the backend. When i comment out the first test, the second works fine.

I don’t know what its wrong.

Creation of a form that allows you to find an opportunity by name and display the necessary information about the opportunity in a table.

So I’m using Lightning Web Component to create a form to retrieve the opportunity when the user search by name.
The result found must return the opportunity fields (StageName, Amount…) with a tab or a datatable (I use a tab)

Important: LWC will be displayed on all accounts in the related section or at home.
The result is not correct, it returns the condition to false” No results “

<template>
    <lightning-card title="Liste d'opportunités du compte" icon-name="standard:opportunity">

        <div class="slds-p-horizontal_small">
            <!--BOUTON SEARCH-->
            <lightning-input type="search" label="Rechercher" value={searchOppo} onchange={handleKeyChange}
                placeholder="Search..."></lightning-input>
            <lightning-button label="Search" onclick={handleSearch} variant="brand"></lightning-button>
        </div>
        <div if:true={messageResult} class="slds-p-horizontal_small">
            <p class="slds-p-horizontal_small">No result found</p>
        </div>
        <!--CONDITIONNEMENT TO DISPLAY RESULTS-->
        <template if:true={showSearchValues}>
            <div class="slds-p-horizontal_small">
                <ul class="slds-list_vertical-space">
                    <template for:each={opportunityList} for:item="actObj">
                        <li key={actObj.Id} onclick={handleParentSelection} data-value={actObj.Id}
                            data-label={actObj.Name} class="slds-p-around_small slds-text-link" style="cursor:pointer;">
                            {actObj.Name} </li>
                    </template>
                </ul>
            </div>
          
            <div class="slds-table">
                <table class="slds-table slds-table_bordered slds-table_cell-buffer">
                    <thead>
                        <tr class="slds-line-height_reset">
                            <th class="slds-text-title_caps" scope="col"> Name </th>
                            <th class="slds-text-title_caps" scope="col"> Stage </th>
                            <th class="slds-text-title_caps" scope="col"> Close Date </th>
                            <th class="slds-text-title_caps" scope="col"> Amount </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="slds-hint-parent">
                            <td data-label="Name">{selectedOpportunity.Name}</td>
                            <td data-label="Stage">{selectedOpportunity.StageName}</td>
                            <td data-label="Close Date">{selectedOpportunity.CloseDate}</td>
                            <td data-label="Amount">{selectedOpportunity.Amount}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </template>
    </lightning-card>
</template>

import { LightningElement, wire, track, api } from 'lwc';

import findOpportunityByAccount from '@salesforce/apex/OpportunitySearchControllerLWC.findOpportunityByAccount';

export default class displayOpportunityList extends LightningElement {

    @track opportunityName ='';

    @track opportunityList;

    @track opportunityId;

    @track messageResult = false;

    @track showSearchValues =false;

    @track selectedOpportunity;

    @api accountId;

    accountId;

    opportunities = [];

    error;

    @wire(findOpportunityByAccount, { accountId: '$accountId' }) opportunities;

    wiredOpportunities({ error, data }) {

        if (data) {

            this.opportunityList = data;

            this.showSearchValues = data.length > 0;

            this.messageResult = data.length === 0 && this.opportunityName !== '';

        } else if (error) {

            console.log(error);

        }

    }

    // METHOD //

 handleKeyChange(event) {

    this.opportunityName = event.target.dataset.label;

}
handleSearch() {
    // Perform some validation if needed
    findOpportunityByAccount({ 
        accountId: this.accountId,
        opportunityName: this.opportunityName 
    })
    .then(result => {
        this.opportunityList = result;
        this.showSearchValues = result.length > 0;
        this.messageResult = result.length === 0 && this.opportunityName !== '';
        this.error = undefined;
    })
    .catch(error => {
        this.error = error;
        this.opportunityList = [];
        this.showSearchValues = false;
        this.messageResult = true; // Show message in case of error
    });
}


}

public with sharing class OpportunitySearchControllerLWC {
    @AuraEnabled(cacheable=true)
    public static List<Opportunity>  findOpportunityByAccount(String opportunityName) {
        // Filter opportunities based on the opportunityName
        return [SELECT Id, Name, StageName, Amount FROM Opportunity WHERE Name LIKE :('%' + opportunityName + '%')];
    }
}

npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:\Users\Admin\AppData\Roaming\npm
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\Admin\AppData\Roaming\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in: C:\Users\Admin\AppData\Local\npm-cache_logs\2024-03-06T18_29_49_436Z-debug-0.log 

I want to have a recorder running on a website where every few seconds a post request is send to an api call to transcribe it.

However, the first time it works, but after that it will give this error:

“Error code: 400 – {‘error’: {‘message’: ‘The audio file could not be decoded or its format is not supported.’, ‘type’: ‘invalid_request_error’, ‘param’: None, ‘code’: None}}”

I tried to give it every time an temporary file name, but that did not work. I tried making the interval longer or shorter.

let mediaRecorder;
let audioChunks = [];
let sendInterval;

document.getElementById('recordBtn').addEventListener('click', async () => {
    if (mediaRecorder && mediaRecorder.state === "recording") {
        mediaRecorder.stop();
        clearInterval(sendInterval); // Clear the interval when stopping
        document.getElementById('recordBtn').textContent = 'Start Recording';
    } else {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            mediaRecorder = new MediaRecorder(stream);
            mediaRecorder.ondataavailable = event => {
                if (event.data.size > 0) {
                    audioChunks.push(event.data);
                    console.log('Chunk received:', event.data.size);
                }
            };

            // Start recording with timeslice to ensure chunks are generated at regular intervals
            mediaRecorder.start(3000);
            document.getElementById('recordBtn').textContent = 'Stop Recording';
            var x = 1;

            const sendAudioChunks = async () => {
                if (audioChunks.length > 0) {
                    console.log('Sending chunks:', audioChunks.length);
                    const audioBlob = new Blob(audioChunks, { 'type': 'audio/wav' });
                    audioChunks = []; // Clear chunks after sending
                    const formData = new FormData();
                    formData.append('audio_file', audioBlob, 'audio.wav');

                    try {
                        // Inside your try block within sendAudioChunks
                        const response = await fetch('/transcribe', {
                            method: 'POST',
                            body: formData,
                        });
                        if (!response.ok) {
                            // Log or handle non-200 responses here
                            console.error('Server responded with non-200 status:', response.status);
                        }

                        const data = await response.json();
                        console.log('Server response:', data);
                        document.getElementById('transcriptionContainer').textContent = data.transcription || 'Transcription failed or was empty.';


                    } catch (error) {
                        console.error('Failed to send audio chunks:', error);
                    }
                } else {
                    console.log('No chunks to send');
                }
            };

            clearInterval(sendInterval);
            sendInterval = setInterval(sendAudioChunks, 3000);

            mediaRecorder.onstop = async () => {
                clearInterval(sendInterval); // Clear the interval when stopping
                await sendAudioChunks(); // Send any remaining chunks
            };
        } catch (error) {
            console.error('Error accessing media devices:', error);
        }
    }
});

// Perform AJAX request
$.ajax({
url: ‘/Account/Register’,
method: ‘POST’,
data: formData,
enctype: ‘multipart/form-data’,
processData: false,
contentType: false,
success: function (response, status, jqXHR) {
console.log(response); // Log the response to see what the server returns

     // Check if the response contains a success property
     if (response.success) {
         // Display success pop-up
         Swal.fire({
             title: 'Registration Successful',
             icon: 'success',
             showConfirmButton: true
         }).then(function () {
             // Redirect to the appropriate page
             window.location.href = '/Home/Index';
         });
     } else {
         // Handle cases where registration failed
         Swal.fire({
             title: 'Registration Failed',
             text: response.message || 'An error occurred during registration.',
             icon: 'error',
             showConfirmButton: true
         });
     }
 },
 error: function (jqXHR, textStatus, errorThrown) {
     // Log the error for debugging
     console.error(textStatus, errorThrown);

     // Display error message using SweetAlert
     Swal.fire({
         title: 'Registration Failed',
         text: 'An error occurred during registration.',
         icon: 'error',
         showConfirmButton: true
     });
 }

});

I have an object with hundreds of functions, variables… From all of these only two are accessible and these start with this ex: this.methodName().

Is there a way to access the other methods using prototype? I see all the methods in Scopes[1] 0: Global

Here is the code:
https://gist.github.com/zamanuhina/74e636d705e5fe8a010e21550cf5e657

function Playerjs(options) {} creates an object and I want to be able to access other methods in this function.

Can someone please help me with understanding what is wrong with my code here?

I keep getting an uncaught TypeError regarding my logoPath, but it is defined correctly. The page is www.eastvanbaseball.com/standings.

Uncaught TypeError: Cannot read properties of undefined (reading ‘logopath’)

This is a function that takes JSON data and computes standings. There is a bunch of additional logic after what I have shared, I can update with that if helpful, but I assume what i shared is where the issue lays. Thank you!

Below is my code:

<div class="selectGroupWrapper">
    <div class="selectGroupList">
        <select id="selectStandingsYear" onchange="getStandings()">
            <option value="2023" selected>2023</option>
            <option value="2022">2022</option>
            <option value="2021">2021</option>
            <option value="2019">2019</option>
            <option value="2018">2018</option>
            <option value="2017">2017</option>
        </select>
    </div>
</div>

<div id="standings_table"></div>
<div id="ringers_table"></div>

<script>
    $(document).ready(function(){
      $("select").trigger('change');
    });

     var teamDb = [
        { fullName: "Chinatown Cobras", lastName: "Cobras", abbr: "CHN", logoPath: "Cobras.png", participating: [true, true, true, false, true, true, true] },
        { fullName: "Clark Park Brawlers", lastName: "Brawlers", abbr: "CP", logoPath: "Brawlers-2019.png", participating: [true, true, true, false, false, true] },
        { fullName: "East Van Black Sox", lastName: "Black Sox", abbr: "SOX", logoPath: "Black_Sox.png", participating: [true, true, true, false, true, true, true] },
        { fullName: "Blood Alley Butchers", lastName: "Butchers", abbr: "BAB", logoPath: "butchers_2.png", participating: [false, false, false, false, false, false, false] },
        { fullName: "Gastown Gaolers", lastName: "Gaolers", abbr: "GAS", logoPath: "Gaolers.png", participating: [true, true, true, false, true, true, false] },
        { fullName: "Mt Pleasant Murder", lastName: "Murder", abbr: "MT", logoPath: "Murder.png", participating: [true, true, true, false, false, true, true] },
        { fullName: "Railtown Spikers", lastName: "Spikers", abbr: "RT", logoPath: "Spikers_alt.png", participating: [true, true, true, false, true, true, true] },
        { fullName: "Strathcona Stevedores", lastName: "Stevedores", abbr: "STR", logoPath: "Stevedores.png", participating: [true, true, true, false, false, true, true] },
        { fullName: "Sunrise Cosmos", lastName: "Cosmos", abbr: "COS", logoPath: "cosmos.png", participating: [true, true, true, false, true, true, true] },
        { fullName: "Sunset Stilettos", lastName: "Stilettos", abbr: "SET", logoPath: "Stilettos.png", participating: [true, true, true, false, false, true, true] },
        { fullName: "Vancouver Isotopes", lastName: "Isotopes", abbr: "VAN", logoPath: "isotopes.png", participating: [true, true, true, false, false, false, false] },
        { fullName: "Little Mountain Blasters", lastName: "Blasters", abbr: "LM", logoPath: "blasters.png", participating: [false, false, true, false, true, true, true] },
        { fullName: "Brewery Creek Mashers", lastName: "Mashers", abbr: "BC", logoPath: "mashers.png", participating: [false, false, false, false, true, true, true] },
        { fullName: "EVBL Ringers", lastName:"Ringers", abbr:"RNG", logoPath:"ev.png", participating: [false, false, false, false, false, true, false] }];

   var yearToFilePath = {
        "2023": "assets/schedule/evbl_schedule_2023.json",
        "2022": "assets/schedule/evbl_schedule_2022.json",
        "2021": "assets/schedule/evbl_schedule_2021.json",
        "2019": "assets/schedule/evbl_schedule_2019.json",
        "2018": "assets/schedule/evbl_schedule_2018.json",
        "2017": "assets/schedule/evbl_schedule_2017.json"
    };

   var logoRootURL = "/assets/team_logos/";
   var ringerNameData = {fullName:"EVBL Ringers",lastName:"Ringers",abbr:"RNG",logoPath:"ev.png"};
   var tieCheck, numTies, c;
   var useLogos = true;
   var tableContent, ringerTableContent;
   
   function getStandings() {

        var visTeam, visAbbr, visLogo, visScore, homeTeam, homeAbbr, homeLogo, homeScore;
        var teamNameData = [],
            teamRecords = [],
            teamSort = [],
            obj,
            getYear = document.getElementById("selectStandingsYear").value,
            season = getYear - 2017,
            teamSeasonIndex = 0;
      for (let i = 0; i < teamDb.length; i++) {
    console.log("Team Object:", teamDb[i]);
    if (teamDb[i].participating[season]) {
        obj = teamDb[i];
        if (Array.isArray(teamDb[i].logoPath)) { // Check if logoPath is an array
            console.log("Logo Path Array:", teamDb[i].logoPath);
            for (let j = 0; j < teamDb[i].logoPath.length; j++) {
                if (parseInt(teamDb[i].logoPath[j].yearStart) <= getYear) {
                    obj.logoPath = teamDb[i].logoPath[j].useLogo;
                }
            }
        } else { // Handle the case where logoPath is not an array
            obj.logoPath = teamDb[i].logoPath; // Assign logoPath directly
        }
        console.log("Modified Team Object:", obj);
        obj.index = teamSeasonIndex;
        teamNameData[teamDb[i].abbr] = obj;
        teamSeasonIndex++;
        obj = {
            team: teamDb[i].abbr,
            gp: 0,
            w: 0,
            l: 0,
            t: 0,
            rs: 0,
            ra: 0,
            strkW: 0,
            strkL: 0,
            strkUnb: 0,
            strkWnl: 0,
            lastFive: '',
            lastW: 0,
            lastL: 0,
            lastT: 0,
            rng_gp: 0,
            rng_w: 0,
            rng_l: 0,
            rng_t: 0,
            rng_rdiff: 0
        };
        teamRecords.push(obj);
        obj = {
            pct: 0,
            p_pct: 0.5,
            runDiff: 0,
            rngwpct: 0.5,
            totRunDiff: 0,
            w_l: 0
        };
        teamSort.push(obj);
    }
}