如何根据引导项选择设置变量

How to set a variable based on bootstrap item selection

本文关键字：选择 设置 变量 何根      更新时间：2023-09-26

所以我试图根据用户选择的LED模块设置变量w(为瓦数)。我正在使用bootstrap库。

正文标签的内容如下:

<div class="container">
  <h2>LED Power Supply Calculator</h2>
  <p>Please select your LED type, then type how many LEDs you will be using in your box</p>                                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Select your LED
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li class="dropdown-header">Wide angle beam</li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript: onclick(w = 1.2);">HLC3S - HW W65K</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript: onclick(w = 0.72);">HLC3S - LW W65K</a></li>
      <li role="presentation" class="divider"></li>
      <li class="dropdown-header">Standard beam</li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript: onclick(w = 0.06);">HLC3S XD W65K</a></li>
    </ul>
  </div>
<BR>
<form role="form">
    <div class="form-group">
      <label for="usr">How many LEDs</label>
      <input type="number" class="form-control" id="usr">
    </div>
</div>
 <script type="text/javascript">    
      document.write(w * 10);   
 </script>

我想最终将瓦数乘以用户放入的led的数量。现在，当用户点击LED类型时，我只需要帮助设置变量'w'。

如果你做一个文档。写你的所有内容将被删除，而不是在这里我们定义了一个函数w()，它接受瓦特的值，并进行计算，并将其打印在html <span class="form-control" id="watt">

中添加的span中

希望有帮助

<div class="container">
  <h2>LED Power Supply Calculator</h2>
  <p>Please select your LED type, then type how many LEDs you will be using in your box</p>                                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Select your LED
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li class="dropdown-header">Wide angle beam</li>
      <li role="presentation"><a role="menuitem" tabindex="-1" onclick="w(1.2);">HLC3S - HW W65K</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" onclick="w(0.72);">HLC3S - LW W65K</a></li>
      <li role="presentation" class="divider"></li>
      <li class="dropdown-header">Standard beam</li>
      <li role="presentation"><a role="menuitem" tabindex="-1" onclick="w(0.06);">HLC3S XD W65K</a></li>
    </ul>
  </div>
<BR>
<form role="form">
    <div class="form-group">
      <label for="usr">How many LEDs</label>
      <input type="number" class="form-control" id="usr">
      <span class="form-control" id="watt"></span>
    </div>
</div>
 <script type="text/javascript">    
    function w(val){
        document.getElementById('watt').innerHTML = val*10;
    }      
    //document.write(w * 10);   
 </script>
相关文章：