CODEWITHSUNDEEP
javascriptcssdomfonts
charlieyin
charlieyin

Reputation: 411

Variable font not adjusting with mousemove event listener

I am trying to have my variable font adjust based on the clientX position of the mouse. However I'm having trouble getting the font to be responsive.

Here is my code:

const text = document.querySelector('.text');

window.addEventListener('mousemove', (e) => {
  console.log(e);
  text.style.fontVariationSettings = `'wght' 100, 'wdth' ${e.clientX.value}`;
});

If I console.log text.style, all fields are simply "".

Upvotes: 0

Views: 60

Answers (1)

PotatoParser
PotatoParser

Reputation: 1058

e.clientX.value is undefined, thus:

const text = document.querySelector('.text');

window.addEventListener('mousemove', (e) => {
  text.style.fontVariationSettings = `'wght' 100, 'wdth' ${e.clientX}`;
});
<div class="text">Hello World</div>

Upvotes: 1

Related Questions