Javascript调用变量从HTML表格

Question

当我手动输入数字时，我有javascript部分工作（切断它的底部部分以减少代码长度），但我努力将我的javascript与我的html一起。我尝试了一些代码来让它起作用，最后我想只需要一个按钮，上面写着“获取定价”，将4个变量的数量，颜色，logoSheet和边距传递给各自的javascript变量。

 <form> 
    <br> 
      <label id="_quantity" >Quantity</label> 
      <input type="number" id="quantity" maxlength="254" data-hint="" name="quantity" required/> 
    <br> 
      <label id="_colors" ># of Colors</label> 
      <input type="number" id="colors" maxlength="254" data-hint="" name="colors" required/> 
    <br>    
      <label id="_logoSheet" ># Logo's per Sheet</label> 
      <input type="number" id="logoSheet" maxlength="254" data-hint="" name="logoSheet" required/> 
    <br>    
      <label id="_margin" >Margin %</label> 
      <input type="number" id="margin" maxlength="254" data-hint="" name="margin" required/> 

<br> 
      <input type="submit" class="fb-button-special" id="fb-submit-button" value="submit" /> 

     </form> 


<button onclick="myFunction()">Get Pricing</button> 
<p>Total Shirt Only:</p> <p id="totalShirtOnly"></p> 
<p>Total Sheet Cost:</p> <p id="totalSheetCost"></p> 
<p>Price Per Sheet:</p> <p id="costOfSheets"></p> 
<p>Total Price:</p> <p id="totalPrice"></p> 
<p>Net Profit:</p> <p id="netProfit"></p> 

</center> 


<script> 
function myFunction() 
{ 


var quantity = document.getElementById('quantity.value'); 
var colors = document.getElementById('colors.value'); 
var logoSheet = document.getElementById('logoSheet.value'); 
var margin = document.getElementById('margin.value'); 


var shirtCost = 2.43; 
var sheetShipping = 15.0; 

var marginPercent = margin/100; 

var totalCost = 0.0; 
var costOfSheets = 0.0; 


</script> 

</body> 
</html> 

Answer 1

我不知道你指的这些JavaScript的变量，如果你正在使用jQuery或没有，但这里是如何让HTML元素的值：

// With jQuery 
var colors = $("#colors").val(); 

// w/o jQuery 
var margin = document.getElementById("margin").value 

这就是你正在寻找？