Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Leah Miller
Leah Miller
16,291 Points
Posted by Leah Miller
Leah Miller
16,291 Points

Finished Four in a row and it worked. I added it to my website and now left and right do nothing.

I added my four in a row game (previously working) into my personal page and used the header and footer from my site. It all works beautifully now except that I cant move a token left or right. I have no idea why, no errors given. Please help!

http://leahmillerdev.com/four-in-a-row.html

3 Answers

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

While the token doesn't move visibly, the arrow doesn't do "nothing". After you've dropped one or more tokens, moving to the right before dropping causes it fall to a different level. So it does internally go to a different column, just not visibly. That might be a clue.

Can you provide a snapshot for a workspace where this code is working for comparison?

UPDATE: Wow, this was a tricky one!   :sweat_smile:

The web page has a <!DOCTYPE html> declaration, putting the browser in "standards mode". But the workspace did not have this, which caused the browser to be in "quirks mode". Apparently one aspect of "quirks mode" is that it tolerates a unit-less numerical value being written into an element's "left" style property, but this is not accepted in standards mode.

To fix this, change the token movement functions to write string values (including units) to that property:

  moveLeft() {
    if (this.columnLocation > 0) {
      this.htmlToken.style.left = this.offsetLeft - 76 + "px";  // coerce string with units
      this.columnLocation -= 1;
    }
  }

  moveRight(columns) {
    if (this.columnLocation < columns - 1) {
      this.htmlToken.style.left = this.offsetLeft + 76 + "px";  // coerce string with units
      this.columnLocation += 1;
    }
  }
Leah Miller
Leah Miller
16,291 Points
Leah Miller
Leah Miller
16,291 Points

https://w.trhou.se/l2pr2qoreg

This was the completed project before adding it to the site.

Ive gone back and have been comparing the two, the components that affect the visual aspect at least. Obviously something is off but Im just not seeing it

Leah Miller
Leah Miller
16,291 Points
Leah Miller
Leah Miller
16,291 Points

I would never have thought of that! thank you so much, it did the trick!