1

Wrote html code that changes the color of the page when selected from a drop down menu. In this assignment I must fix the "color" label so that when I click on it it brings up the selection of colors. I can't seem to find a way to accomplish this. I've tried to maybe wrap the the label tags in other tags but none seem to work.

function changeColor() {
  const color = document.getElementById("colors").value;
  document.body.style.backgroundColor = color;
}
<div class="container-fluid">
  <form>
    <div class="form-group row">
      <label class="col col-form-label col-4" >Color</label>
      <div class="col col-4">
        <select name="colors" id="colors" class="form-control">
          <option selected>Select...</option>
          <option value="blue">Blue</option>
          <option value="red">Red</option>
          <option value="green">Green</option>
        </select>
      </div>
    </div>
<!-- Above this is the section for you to edit -->
    <div class="form-group row">
      <div class="col">
        <button type="button" class="btn btn-primary" onclick="changeColor()">Go</button>
      </div>
    </div>
  </form>
</div>
Alexander Nied
  • 12,804
  • 4
  • 25
  • 45
Jonathan Mporampora
  • 33
  • 4
  • you said *fix the "color" label so that when I click on it it brings up the selection of colors*, its literally what your code does, everything on your code is working really well for me and it does brings up a selection of colors when i click the `select` tag, the javascript is working fine too – I_love_vegetables Jul 17 '21 at 04:02
  • 1
    Moved the code into a snippet; for what it is worth I am able to reproduce the issue the user is seeing... perhaps the SO users who don't encounter the issue are using a different browser? I am on Chrome... – Alexander Nied Jul 17 '21 at 05:12
  • 1
    I don't see anything associating the [` – showdev Jul 17 '21 at 05:19
  • 1
    @showdev - yes, I was about to call that out-- there should be an association between label and control, either by wrapping or with a `for` attribute. Unfortunately, it appears that [there is no programmatic way to trigger a select to open](https://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due)- the only way this might be possible would be to create a custom dropdown that _can_ be controlled via JS-- but be prepared to include all the same native functionality-- including accessibility. – Alexander Nied Jul 17 '21 at 05:24

1 Answers1

-1

function changeColor() {
  
  var e = document.getElementById("colors");
  var color = e.options[e.selectedIndex].text;
  document.body.style.backgroundColor = color;
  
}
<div class="container-fluid">
  <form>
    <div class="form-group row">
      <label class="col col-form-label col-4">Color</label>
      <div class="col col-4"> 
        <select name="colors" id="colors" class="form-control">
          <option selected>Select...</option>
          <option value="blue">Blue</option>  
          <option value="red">Red</option>
          <option value="green">Green</option>
        </select>
      </div>
    </div>
<!-- Above this is the section for you to edit -->
    <div class="form-group row">
      <div class="col">
        <button type="button" class="btn btn-primary" onclick="changeColor()">Go</button>
      </div>
    </div>
  </form>
</div>
Hossein Azizdokht
  • 748
  • 3
  • 17