在JavaScript模板文字中使用条件

Question

I store a value in my localstorage and based on that value I would like to decide the styling inside a template literal notation.

here I have some variables:

var right = localStorage.getItem("shareBarPosition") === "right";
var posRight = `#socialShare {
  left: auto;
  right: 0 !important;
}`;

var posLeft = `#socialShare {
  left: 0 !important;
  right: auto;
}`;

which I would like to use in a template literal notation like this:

document.querySelector("#shareButton-code").innerHTML += `<style>
    /* Button specific styling */
    ${right ? posRight : posLeft}
</style>`

But this will always show the posRight styling. Why is that?

Answer 1

I had to change the innerHTML += to innerHTML =

document.querySelector("#shareButton-code").innerHTML = `<style>
  /* Button specific styling */
  ${!right ? posLeft : posRight}
</style>`