如何根据 bootstrap 项目选择设置变量

Question

所以我试图根据用户选择的 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'。

Answer 1

如果你做 document.write 你所有的内容都将被擦除，而不是在这里我们定义了一个函数 w() 它接受瓦特的值并进行计算并在添加的范围内打印它在 html <span class="form-control" id="watt">

希望对您有所帮助

<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>

如何根据 bootstrap 项目选择设置变量

How to set a variable based on bootstrap item selection

javascript

calculator

bootstrap-modal