时间戳

首页 > 解决方案 > 单击标签文本

javascript - 单击标签文本

问题描述

编写了从下拉菜单中选择时更改页面颜色的 html 代码。在这个任务中，我必须修复“颜色”标签，以便当我点击它时，它会显示颜色的选择。我似乎无法找到实现这一目标的方法。我曾尝试将标签标签包装在其他标签中，但似乎没有任何效果。

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>

标签： javascripthtmlcss

解决方案

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>

推荐阅读