-2

I am working on a website, but when I try to change the style property through js, it doesn't work.

I'm using the element.style.property to change the CSS, but whatever I try nothing works.

I Don't know how to fix this, although it might just be problem with my code editor or compiler

MY JS

  att1Btn.style.background = 'black;'
  att1Btn.style.color = 'white;'
  att2Btn.style.background = 'black;'
  att2Btn.style.color = 'white;'
  att3Btn.style.background = 'black;'
  att3Btn.style.color = 'white;'
  hBtn.style.background = 'black;'
  hBtn.style.color = 'white;'
  eBtn.style.background = 'black;'
  eBtn.style.color = 'white;'
  forfeit.style.background = 'black;'
  forfeit.style.color = 'white;'

MY HTML

    <div class="battle" id="battle" style="position: absolute; left: 0; width: 100%; height: 84%; background: #36afec;">
      <div class="menu">
        <div class="att1" id="att1" onclick="attNum = 1; curPmonFunc()"><br>ATTACK 1</div>
        <div class="att2" id="att2" onclick="attNum = 2; curPmonFunc()"><br>ATTACK 2</div>
        <div class="att3" id="att3" onclick="attNum = 3; curPmonFunc()"><br>ATTACK 3</div>
        <div class="forfeit" id="forfeit" onclick="lose()"><br>FORFEIT</div>
        <div class="health" id="health"></div>
        <div class="energy" id="energy"></div>
      </div>
      <div class="action">
        <div class="pokemon" id="displayP"></div>
        <div class="opponent" id="displayO"></div>
      </div>
    </div>
Cody Brynlund
  • 81
  • 1
  • 8
  • I Realized I Forgot To Add The Part Where I Define Vars, So If You Need It Just Ask – Cody Brynlund Dec 13 '21 at 03:44
  • Just [edit] your post and provide a [mre]. [What Do You Mean “It Doesn’t Work”?](//meta.stackexchange.com/q/147616/289905) Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. Make sure you familiarize yourself with the [DOM API](//developer.mozilla.org/docs/Web/API/Document_Object_Model), especially [What do querySelectorAll and getElementsBy\* methods return?](/q/10693845/4642212). Nothing is broken and everything works fine if you use the API correctly. – Sebastian Simon Dec 13 '21 at 03:47
  • Start with the browser dev tools console and any errors that may be be present. Always the first place to look when debugging – charlietfl Dec 13 '21 at 03:49
  • The Js just doesn't work for any style changing is the js and there's no errors – Cody Brynlund Dec 13 '21 at 03:50
  • 2
    Unless you provide enough code to make this runnable there's not much anyone can do to help. Click on `<>` in question editor and you can even make it run right here in the page – charlietfl Dec 13 '21 at 04:12

1 Answers1

1

Your error is ";" in color. It must be after color. Not in it.

let att1Btn = document.querySelector(".att1");
att1Btn.style.backgroundColor = 'black';
att1Btn.style.color = 'white';
ElikaNaari
  • 86
  • 3