I am trying to assign the values of an array to elements that were selected by the querySelectorAll function, Any help is appreciated. The code I am trying to write that when the viewpoint of the browser is below 768px, the text changes to the ones in the array, I have tried all the methods I could think of
var newb = document.querySelectorAll("#buttonsize button")
var arSizes = ["Small", "Medium", "Large", "X-Large", "Large", "XX-Large"]
for(var i = 0; i < arSizes.length; i++) {
newb[i].textContent = arSizes[i]
}
It gives this error
Uncaught TypeError: Cannot set properties of undefined (setting 'textContent')
I also tried doing newb.textContent and also using a forEach function.
I think you haven't enough buttons in html so better listing or buttons firstly
var newb = document.querySelectorAll("#buttonsize button");
var arSizes = ["Small", "Medium", "Large", "X-Large", "Large", "XX-Large"];
Array.from(newb).forEach((btnEl, index) => {
btnEl.textContent = arSizes[index]
});<div id="buttonsize">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
</div>