Question

我有一个包含用户输入的HTML页面（下拉菜单和文本字段）。应将这些用户输入传递到JavaScript文件，然后在公式中处理和使用它们。输入通过公式后，它们应作为结果传递回备用HTML页面。在此结果页面上，必须有一个选项，可以使用PHP通过电子邮件发送结果。

我已经构建了基本模型（使用Twitter Bootstrap），直到输入存储为JavaScript变量，然后这些变量被传递到名为“calculate.js”的JavaScript文件中，其中所有公式都是处理。

我现在面临的问题是让公式结果显示在结果HTML页面上，但公式返回“undefined”。我一直试图理解为什么它不起作用，我似乎不太明白问题是什么......也许我应该改变我存储输入值的方式？

无论如何，下面是我的项目的基本概念;

HTML摘要，名为“index.html”：

<div class="row">
  <div class="col-md-6">
    <label for="dropdown">Dropdown Input</label><br>
    <select name="dropdown" id="dropdown" class="dropselect">
      <option value="None selected">Please select one</option>
      <option value="95">95</option>
      <option value="75">75</option>
    </select>
  </div>
  <div class="col-md-6">
    <label for="text_input">Text Input</label>
    <input type="text" class="form-control" id="text_input" placeholder="Length">
  </div>
</div>
<ul class="list-inline pull-right">
    <li><button type="button" class="btn btn-primary next-step" onclick="Submit()">Save and continue</button></li>
</ul>

JavaScript文件摘要，名为“main，js”：

function Submit() {
  document.getElementById('output_user_input').innerHTML =
    "Dropdown Input: " + document.getElementById("dropdown").value + "<br>" +
    "Textfield Input: " + document.getElementById("text_input").value;
}

Javascript文件的摘要，名为“calculate.js”：

var variable_1 = document.getElementById("dropdown").value;
var variable_2 = document.getElementById("text_input").value;

var formula = (variable_1 * variable_2);

现在公式返回未定义，我不知道这是什么原因。为长期问题道歉，但我必须让你了解我需要在这里做什么。

Answer 1

variable_1或variable_2中的一个也必须未定义（可能两者都有）;你可以使用JS debugger或console.log（）找出哪一个。

第一个问题似乎是input#text_input缺少一个值（也许你手动输入它，但只是从你发布的代码，它是未定义的）

其次，在进行任何算术之前，将字符串值转换为数字是一种好习惯。当您尝试将字符串相乘时，JavaScript会将字符串转换为数字，因此在这种情况下它可能会起作用。但是如果你的公式是variable_1 + variable_2，字符串就会被连接起来。所以你应该把它改成这样的东西：

var variable_1 = parseInt(document.getElementById("dropdown").value);
var variable_2 = parseInt(document.getElementById("text_input").value);

看看这个工作示例：https://jsfiddle.net/u1jnwLvn/

JavaScript变量在HTML中显示为未定义

1 个答案: