Nox Posts - Answer Overflow

Nox

•Created by Nox on 7/30/2023 in #front-end

Variable function parameter

I'm trying to figure out how to pass a parameter in a for loop, like so:

for (let i = 0; i < mainhaul[0].length; i++) {      
      createSingle(
        co2cols,
        'Distance',
        distanceFix(mainhaul[0][i].emissions.distances.{type}._)
      );
}

This loop sits in a function, which gets type as a parameter, that I'm trying to use to alter the distanceFix parameter, but I can't figure out to do it, or if I even can do what I'm trying to. A little worried I've fallen into an xy trap. Basically, the question is, is there syntax to allow me to insert a variable into distanceFix to replace {type}? I'm not even sure if I'm making sense at this point, feeling a little in over my head :p

6 replies

KPCKevin Powell - Community

•Created by Nox on 7/13/2023 in #front-end

Adding eventlisteners iteratively not working.

I have an array that I'm trying to iterate through to add to a list. Everything but the eventlistener works fine.

let suggestion;
      for (let i = 0; i < cities.length; i++) {
        suggestion = document.createElement('li');
        suggestion.innerHTML =

${cities[i].postcode} - ${cities[i].city}

;
        suggestion.dataset.city = cities[i].city;
        suggestion.dataset.id = cities[i].location;

        suggestion.addEventListener('click', () => {
          input.value = suggestion.dataset.city;
          input.dataset.id = suggestion.dataset.id;
          closeList(input);
        });

        suggestions.appendChild(suggestion);
      }

The problem is, regardless of which li item is clicked afterwards, the last in the list is added to the input, and I can't figure out why. Any suggestions?

4 replies

KPCKevin Powell - Community

•Created by Nox on 7/4/2023 in #front-end

Transition after hiding flex child

I have 3 flex children in a row, set to 100% width, so it spaces evenly. Now, using js, I'm hiding one conditionally, and I'd like a short transition to make the change a little more organic, but I'm not sure how best to approach it. What I've tried so far is to add transition: width 500ms ease-in; to all 3 of the flex items. The hope was that the expansion of width would trigger it, but it doesn't. I'm not sure if it can be done, or if I've explained what I'm trying to do, but if anyone has a suggestion, I'd love to hear it.

11 replies

KPCKevin Powell - Community

•Created by Nox on 6/23/2023 in #front-end

useState seemingly causing issues with nextjs

I'm trying to add a relatively simple toggle for a mobile menu, however it's causing weird button behaviour (requires several clicks, at least doubleclick to fire), and I get a warning that appears connected (Warning: Extra attributes from the server: class). If I remove useState from the component, the warning goes away.

'use client';
import { useState } from 'react';
import Link from 'next/link';

import { FaBars } from 'react-icons/fa';

import NavBar from '../Navigation/NavBar';
import MobileMenu from '../Navigation/MobileMenu';

const Header = () => {
  const [mobileMenu, setMobileMenu] = useState(false);
  
  const mobileMenuHandler = () => {
    setMobileMenu(!mobileMenu);
    console.log(mobileMenu);
  };

  const menuLinks = (
    <>
      <li>
        <Link href='/'>Home</Link>
      </li>
      <li>
        <Link href='/projects'>Projects</Link>
      </li>
      <li>
        <Link href='/contact'>Contact</Link>
      </li>
    </>
  );

  return (
    <>
      <header>
        <div className='flex w-full justify-between text-3xl mt-8 md:justify-center md:text-2xl'>
          <span className='mx-8'>DBHaslund</span>
          <button
            onClick={mobileMenuHandler}
            className='md:invisible md:mx-0 mx-8'
          >
            <FaBars />
          </button>
        </div>
        <NavBar menuLinks={menuLinks} />
      </header>
      {mobileMenu && (
        <MobileMenu menuLinks={menuLinks} menuButton={mobileMenuHandler} />
      )}
    </>
  );
};

export default Header;

I can't for the life of me figure out what's going on, I assumed it'd be a pretty simple thing, and yet I have no idea what to try next. I hope I've provided enough info, otherwise let me know.

7 replies

Gaming

Programming