Question

我创建了一个表单，其中有一个下拉菜单可供选择，还有三个其他文本字段供用户输入数据。

我需要对用户输入的数据执行计算，然后显示结果。

目前，我只想将结果传递给函数并打印结果。从那里我将弄清楚如何将这些输出显示在表格中。

现在，我无法识别特定元素的值。通过下拉菜单，我可以通过编写document.getElementById("activity_level").value来识别所选值。运行该函数时，其余值不会出现。我假设我没有识别值类型，因此浏览器知道显示的内容。

这是我的HTML：

<form>
        Activity Level: <select id="activity_level">
                        <option value="null">Please Choose One...</option>
                        <option value="1.25">Practically a Vegetable</option>
                        <option value="1.35">Mostly Desk Work and Light Walking</option>
                        <option value="1.55">Moderate Exercise 2-3 Times Per Week</option>
                        <option value="1.75">Heavy Exercise 3-4 Times Per Week</option>
                        <option value="1.95">Committed Hardcore Athlete</option>
                        </select></br>
        BodyFat Percentage <input type="text" id="bfp" /> </br>
        Total Weight <input type="text" id="tw" /></br>
        Target Bodyfat Percentage <input type="text" id="target_bodyfat_pct" /></br>
        <input type="button" value="Calculate" onclick="Calculate()" />
    </form>

这是我的javascript：

 <script type="text/javascript">

    function Calculate(){
        //document.write(bfp + "</br>");
        document.write(document.getElementById("activity_level").value + "</br>");
        //document.write(document.getElementById("tw") + "</br>");
        //document.write(document.getElementById("target_bodyfat_pct"));
    }

    </script>

Answer 1

您需要在输入中引用value属性，就像使用选择

一样

document.write(document.getElementById("target_bodyfat_pct"));
document.write(document.getElementById("tw") + "</br>");

应该是

document.write(document.getElementById("target_bodyfat_pct").value);
document.write(document.getElementById("tw").value + "</br>");

另外，考虑为所有输出创建一个div，然后将其写入。

<div id="yourOutputDiv"></div>

var results = document.getElementById("activity_level").value + "</br>" +
              document.getElementById("target_bodyfat_pct").value + 
              document.getElementById("tw").value + "</br>";

document.getElementById("yourOutputDiv").innerHTML = results;

将HTML表单数据传递给Javascript函数

1 个答案: