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

jason limmm
jason limmm
8,009 Points
Posted by jason limmm
jason limmm
8,009 Points

js error

here is my snapshot:https://w.trhou.se/pcxw1vsvba

//make the variables for stuff for convenience
const nextbutton = document.body.querySelector(".next");
const progressbarjuice = document.body.querySelector(".bar .myval");

nextbutton.addEventListener(
  "click", ()=>{
    progressbarjuice.style.width+=33%;
  }
)

anything wrong with this code? the chrome devtools says that there is an error in line 7, an uncaught ";"

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

The literal string values need to be enclosed in quotes:

const nextbutton = document.body.querySelector(".next");
const progressbarjuice = document.body.querySelector(".bar .myval");

    progressbarjuice.style.width = "66%";    // also, replace instead of append
jason limmm
jason limmm
8,009 Points
jason limmm
jason limmm
8,009 Points

but is there like a way i can add the percentage instead?

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Keep a separate variable for the percentage, and each time you add to it, convert it to a string and then update the element property with it. For example:

let percent = 33;     // initial percentage value
// ...
    percent += 33;    // increase the percentage
    progressbarjuice.style.width = `${percent}%`;