Search code examples
javascriptaframe

How do I add A-frame elements in Javascript?


I am trying to add A-Frame elements using Javascript, but won't work. I need to have a for loop to add a bunch of boxes together.

//Starting variables
var sceneEl = document.getElementsByTagName('a-scene')[0];
var pathLength = 8;

// path
for (var i = -1; i => -pathLength; i--) {
  //wood
  var woodPathEl = document.createElement('a-box');
  woodPathEl.setAttribute("position", "0 -1 " + i);
  woodPathEl.setAttribute("src", "#wood");
  sceneEl.appendChild(woodPathEl);

  //  grass
  var grassPathEl = document.createElement('a-box');
  grassPathEl.setAttribute("position", '-1 -1 ' + i);
  grassPathEl.setAtrribute("src", '#grass');
  sceneEl.appendChild(grassPathEl);
}

Solution

  • While the looping method seems a bit unconventional to me, I believe the real issue lies with the =>. You want to use >= for "greater than or equal to". => is for Arrow Function assignment in ES6, which is a completely different animal.