Cannot read property 'style' of undefined div

Question

<div class="spinner-grow" style="width: 3rem; height: 3rem; margin-left: 900px;display: none; " role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<button onclick="Load()">load</button>

<script>
  function Load() {
    let loadingEl = document.getElementsByClassName('spinner-grow').value;
    loadingEl.style.display = 'block'
  }
</script>

Cannot access div property cannot access div property

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Sebastian Simon, Aug 29 '21 at 07:31
A collection of elements doesn’t have a `value`. Even if it had, a `value` doesn’t have a `style`. Please read the documentation. — Sebastian Simon, Aug 29 '21 at 07:32
Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Note that there are [much better alternatives](/q/14028959/4642212) to a `load` listener like `defer` or `DOMContentLoaded`. — Sebastian Simon, Aug 29 '21 at 07:32
Hello and welcome to StackOverflow. please take a moment and read this article https://stackoverflow.com/help/how-to-ask about how to asking questions also read this article https://stackoverflow.com/help/minimal-reproducible-example about how to ask a good question with minimum requirement. — nima, Aug 30 '21 at 06:17
please explain more about your problem/expectation from the above code snippet to help your question be understandable. — nima, Aug 30 '21 at 06:17

score 0 · Accepted Answer · answered Aug 29 '21 at 07:51

To illustrate the observations/points made above by @Sebastian Simon you can remove the inline function calls ( ...onclick=load() etc ) and rely upon externally registered event handlers as below. querySelector and querySelectorAll allow easy targeting of DOM elements and nodelists respectively - and a nodelist has numerous methods that will aid further processing - here forEach is particularly useful

// utility that will help toggle the display property of an element "n"
const toggle=(n)=>n.style.display=='block' ? 'none' : 'block';



// find the button and assign a "click" event listener
document.querySelector('button').addEventListener('click',()=>{
  /*
    find all "spinner-grow" class elements 
    and toggle their display property
  */
  document.querySelectorAll('.spinner-grow').forEach( div => div.style.display=toggle( div ) )
});

.spinner-grow{
  width:3rem; 
  height:3rem; 
  display:none;
}
.spinner-grow > span{
  display:inline-block;
  color:red;
}

<div class="spinner-grow" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

<button>load</button>

Cannot read property 'style' of undefined div

1 Answers1