Reference element from another element

[HEAVYPOLY]

const PricingCard = (v) => {
  return div({
    class: `pricingCard ${v.class}`,
    style: `height:57rem;font-size:3rem;border:solid .5rem ${v.color}`,
    onmouseover: (e) => {
      e.target.style.boxShadow = `0 0 3rem ${v.color}`; e.target.style.borderColor = adjustCSSBrightness(v.color, 1.1)
      checkoutButtonRef.style.background = adjustCSSBrightness(v.color, 1.1)
    },
    onmouseout: (e) => { e.target.style.boxShadow = 'var(--shadow)'; e.target.style.borderColor = v.color },
  },
  button({
    ref: checkoutButtonRef,
    style: `pointer-events:all;font-size:1.8rem;border-radius:1rem;width:70%;font-weight:600;padding:3.5rem;background:${v.buttonColor || v.color};color:${v.fontColor || 'white'}`,

    onclick: () => (v.label === 'basic') ? showPage('login') : checkoutLemonsqueezy(v),
  }, () => `${(v.label === 'basic') ? 'Go Basic' : (v.period === 'lifetime') ? `Buy ${v.label}` : `Sync ${v.period}`}`),
  ul({ style: 'margin-bottom:auto;box-sizing:border-box;' },
    v.includes.map(i => li({ style: 'font-size:1.7rem' }, i))),
  )
}

is there a vanJs way to reference an element from another element? in this case it would be ok to use e.target.parentElement.nextElementChild or e.target.nextElementSibling
but I'm wondering if there is a way to pass the button around as reference in the case of something more complicated, nested etc

[Tao-VanJS]

One of the pattern you can following is something like:

const PricingCard = (v) => {
  const listDom = ul({ style: 'margin-bottom:auto;box-sizing:border-box;' },
    v.includes.map(i => li({ style: 'font-size:1.7rem' }, i)),
  )

  return div({
    class: `pricingCard ${v.class}`,
    style: `height:57rem;font-size:3rem;border:solid .5rem ${v.color}`,
    onmouseover: (e) => {
      e.target.style.boxShadow = `0 0 3rem ${v.color}`; e.target.style.borderColor = adjustCSSBrightness(v.color, 1.1)
      checkoutButtonRef.style.background = adjustCSSBrightness(v.color, 1.1)
    },
    onmouseout: (e) => { e.target.style.boxShadow = 'var(--shadow)'; e.target.style.borderColor = v.color },
  },
  button({
    ref: checkoutButtonRef,
    style: `pointer-events:all;font-size:1.8rem;border-radius:1rem;width:70%;font-weight:600;padding:3.5rem;background:${v.buttonColor || v.color};color:${v.fontColor || 'white'}`,

    onclick: () => (v.label === 'basic') ? showPage('login') : checkoutLemonsqueezy(v),
  }, () => `${(v.label === 'basic') ? 'Go Basic' : (v.period === 'lifetime') ? `Buy ${v.label}` : `Sync ${v.period}`}`),
  listDom,
  )
}

We have lots of examples following that pattern, for instance: https://vanjs.org/demo#todo-app.

[HEAVYPOLY]

Ah, that is so elegant, thank you!