Tips for assigning array variables to elements in querySelectorAll [Pure JavaScript]

Question

Tips for assigning array variables to elements in querySelectorAll [Pure JavaScript]

I need help with assigning values from an array to elements selected by the querySelectorAll function. I am trying to write code that will change the text to different values in the array when the browser width is below 768px, but I'm facing some challenges.

var newButtons = document.querySelectorAll("#buttonsize button");
var sizesArray = ["Small", "Medium", "Large", "X-Large", "Large", "XX-Large"];
    for(var i = 0; i < sizesArray.length; i++) {
      newButtons[i].textContent = sizesArray[i];
   }

An error occurs which says:

Uncaught TypeError: Cannot set properties of undefined (setting 'textContent')

I have also tried newb.textContent and using a forEach function without success.

javascript css arrays

Answer 1

Answer №1

It appears that there may be a need for more buttons in the HTML code, so it would be beneficial to create a list or add buttons initially.

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>

Answer 2

It appears that there may be a need for more buttons in the HTML code, so it would be beneficial to create a list or add buttons initially.

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>

Tips for assigning array variables to elements in querySelectorAll [Pure JavaScript]

Answer №1

Similar questions

"How to dynamically fill a text input field from a table using jQuery when a specific value is selected, potentially involving multiple rows (possibly

Set all form fields to ng-touched programmatically when the form is submitted

When clicked, check if the CSS value is equal to

Facing difficulty in uploading image to local server using Froala editor

Is it possible to refactor this forwardRef so that it can be easily reused in a function?

What is the best way to link one element to another element?

AngularJS Error: Attempting to access 'then' property of an undefined value

"Converting to Typescript resulted in the absence of a default export in the module

Creating an array in TypeScript is a versatile and powerful feature that

Guideline on extracting private keys from Windows Certificate Manager

What is the best way to cache node_modules when package.json remains unchanged during yarn or npm install within a Docker build process?

Output JSON data from PHP for use in Javascript

A Step-by-Step Guide to Clearing JSON Cache

Component failing to refresh with each key modification

Debugging and ensuring the functionality of Cordova (Phonegap) HTTPS connections

overlay the div or image with a translucent color

Animating the left and right positioning of a single element using CSS transitions

Unusual encoding in the ajax response

Issue encountered in Babel version 6 with the transform-es2015-classes plugin in loose mode, causing a SyntaxError when using async/await

Owner executes the Snowflake Store Procedure