How to get an element style after a delay in javascript-CodePudding

I need to check the value of the "font-weight" property of a 'li' element after an amount of time whenever a click event, the code above loops through all 'li's elements so whenever a click event is fired on one of them, it should catch the value of the "font-weight" property, but actually it returns a blank line:

const pages = document.querySelectorAll("#pagination li");

pages.forEach(page => page.addEventListener('click', function(e) {
    let fontWeight = e.target.style.fontWeight;
    console.log(fontWeight)
    setTimeout(() => {
        console.log(fontWeight)
    }, 1000)
}));

document.querySelector('#pagination li:nth-of-type(3)').click()

CodePudding user response：

try using

window.getComputedStyle(e.target).fontWeight;

I'm not entirely sure why this happens but I think it has something to do with the way the style was applied to the element.

CodePudding user response：

There was no HTML code with your code snippet, so I added some HTML to work with the JavaScript code you gave.

I don't know why document.querySelector('#pagination li:nth-of-type(3)').click() does not work for you. Probably there is something wrong with the HTML you are using. It works with the HTML below and, after clicking RUN in the Code Snippet, bold appears in the console.log

The following line in your code will read the font weight at the time of the click:

let fontWeight = e.target.style.fontWeight;

so your first console.log will be correct. However, your second console.log will only return this very same value, because you are not accessing the fontWeight attribute from e.target. I can only guess that there were no font weights set on your li elements or your CSS selectors were not working properly. That's probably why nothing will be returned when you click on a number.

In the code below, we can store a reference to e.target in the liElement variable and then we can access this inside the setTimeout callback. In this way, the code will access the liElement twice, once on click and again one second later. If the font weight changes then you will see this in the console.log

const pages = document.querySelectorAll("#pagination li");
const fontWeightOnClick = document.getElementById("fontWeightOnClick");
const fontWeightAfter1Second = document.getElementById("fontWeightAfter1Second");

pages.forEach(page => page.addEventListener('click', function(e) {
  let liElement = e.target;
  console.log(liElement.style.fontWeight, "on click");
  setTimeout(() => {
    console.log(liElement.style.fontWeight, "after 1 second");
  }, 1000)
}));

document.querySelector('#pagination li:nth-of-type(3)').click()

#pagination {
  list-style: none;
  font-size: 1.5rem;
}

#pagination li {
  display: inline-block;
}

<ul id="pagination">
  <li>1</li>
  <li>2</li>
  <li style="font-weight: bold;">3</li>
  <li style="font-weight: 800;">4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li style="font-weight: bolder;">10</li>
  <li style="font-weight: 600;">11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
</ul>
<p>Click on '3', '4', '10' or '11' to return the weight. Clicking on any other number will not return the weight</p>