How to put array element inside grid template area in JavaScript

Question

I want to dynamically changing some values in grid-area property using JS.

var d = ["about", "contact"];
  document.getElementById("container").style.gridTemplateAreas = '"services d[0] d[1] content content content"';

Is it possible to place for example d[0] inside these signs ' " to make my website more dynamic? The layout is not changing because JS reads it as a string "d[0]" not as an assigned value, which is "about". I'm going to randomly assigning values from the array, but for this moment I just want to place a specific value.

Mohammed Khaled · Accepted Answer · 2020-06-09 23:39:20Z

3

yes, you can simply do that using Template literal

var d = ["about", "contact"];
  document.getElementById("container").style.gridTemplateAreas = `services ${d[0]} ${d[1]} content content content`;

use `` instead of ""
then place your variable inside ${}

Example :

var names = ["Adam","Sara"]

   console.log(`welcome mr.${names[0]} and ms.${names[1]}, Have a nice day :)`)

edited Jun 9, 2020 at 23:39

answered Jun 9, 2020 at 23:25

Mohammed Khaled

515 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kicknee Over a year ago

Thanks, I will remember it for other projects, but it doesn't work in my case. I guess gridTemplateAreas requires extra ' ' signs ? When I tried without placing array value just writing document.getElementById("container").style.gridTemplateAreas = ' "services about content content content content" '; - the layout has changed, but without extra ' ' , the layout hasn't

Kicknee · Accepted Answer · 2020-06-10 00:29:45Z

0

Thx Mohammed for the tip. To make it work, I've changed document.getElementById("container").style.gridTemplateAreas = `services ${d[0]} ${d[1]} content content content`; into document.getElementById("container").style.cssText = `grid-template-areas: 'services ${d[0]} content content content content';`; Great

answered Jun 10, 2020 at 0:29

Kicknee

11 bronze badge

Collectives™ on Stack Overflow

How to put array element inside grid template area in JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related