javascript - html 表单文本元素，无法正确解析为 javascript 方法

Question

我有一个简单的calculate.js函数，它计算价格并将其显示给用户。这是我的功能:

function calculatePrice() {

  //Get selected data  
  var width = document.getElementById("width");  

  var heigth = document.getElementById("height");   

  var elt = document.getElementById("style");
  var style = elt.options[elt.selectedIndex].value;

  elt = document.getElementById("materials");
  var materials = elt.options[elt.selectedIndex].value;

  elt = document.getElementById("priority");
  priority= elt.options[elt.selectedIndex].value;

  //convert data to integers
  style = parseInt(style);
  materials = parseInt(materials);
  priority = parseInt(priority);
  width = parseInt(width);
  height = parseInt(height);   

  //calculate total value  
  var total = 500* (height + width) + (style + materials + priority)

  //print value to  PicExtPrice 
  document.getElementById("PicExtPrice").value=total;
 }

一切都工作正常，直到我开始使用宽度和高度变量。问题是它们是文本字段，我希望用户直接输入数字，而不是像其他值一样选择选项。

输入字段的 HTML 代码:

<div class="col-lg-6">
  Indæst bredden på ønskede malleri 
  <input name="width" type="text" maxlength="512"  id="width" onChange="calculatePrice()"/> 
</div>

<div class="col-lg-6">
  Indæst længden på ønskede malleri 
  <input name="heigth" type="text" maxlength="512"  id="heigth" onChange="calculatePrice()"/> 
</div>

下拉选项示例:

<div class="col-lg-6">
  <SELECT NAME="Stil" onChange="calculatePrice()" id="style">
    <OPTION value="0">Hvilken stil skal malleriet være mallet i</OPTION>
    <OPTION value="1">Kubisme</OPTION>
    <OPTION value="2">Impressionisme</OPTION>
    <OPTION value="3">Pop/Ekspressionisme</OPTION>
  </SELECT>
</div>

Answer 1

您的输入 ID 和 JavaScript 中存在一些拼写错误，请检查并更正它们。

将您的 javascript 函数更改为此，您的问题应该得到解决。

function calculatePrice() {

        //Get selected data  
        var width = document.getElementById("width").value;

        var height = document.getElementById("height").value;

        var elt = document.getElementById("style");
        var style = elt.options[elt.selectedIndex].value;

        elt = document.getElementById("materials");
        var materials = elt.options[elt.selectedIndex].value;

        elt = document.getElementById("priority");
        priority = elt.options[elt.selectedIndex].value;

        //convert data to integers
        style = parseInt(style);
        materials = parseInt(materials);
        priority = parseInt(priority);
        width_int = width == "" ? 0 : parseInt(width);
        height_int = height == "" ? 0 : parseInt(height);

        //calculate total value  
        var total = 500 * (width_int + height_int) + (style + materials + priority);

        //print value to  PicExtPrice 
        document.getElementById("PicExtPrice").value = total;

    }

问题是你应该首先获取元素的值。其次，您应该检查它是否没有值将其设置为零。