Question

我正在尝试获取用户表单输入并将其显示回用户，以及其他所有内容（所有这些都需要将输入存储为JS变量）。

我正在尝试将其吐出警报，作为一个快速反馈循环，我不断得到的是[对象HTMLInputElement]。我试过使用document.forms [0]和document.getElementById（如下所示）并且都不起作用。另外，我正在使用bootstrap typeahead，这可能会使这个问题复杂化吗？

我错过了什么？

以下是代码：

<div class="hero-unit">
    <h1> Title </h1>
    <p> This form description </p>  
    <form class="well" name="formInput" action= "#">
        <label>Input</label>
        <input Id="txtvarInput" class="span3" style="margin: 0pt auto;" type="text" placeholder="AAA, BBB, CCC..." data-provide="typeahead" data-items="10" data-source="[&quot;AAA&quot;,&quot;BBB&quot;,&quot;CCC&quot;,&quot;DDD&quot;,&quot;EEE&quot;,&quot;FFF&quot;,&quot;GGG&quot;,&quot;HHH&quot;,&quot;III&quot;,&quot;JJJ&quot;,&quot;KKK&quot;,&quot;LLL&quot;]"/>               
        </label>
        <div class="form-actions" "span3">
            <input name="submit" type="submit" class="btn" value="Select" onclick="alert('you chose ' + theInput.value)"/>
            <script language="JavaScript" type="Text/JavaScript">
                var theInput = document.getElementById('txtvarInput');
            </script>
        </div>
    </form>
</div>

<div class="page-header">
    <h1>Input:
        <script language="JavaScript" type="Text/JavaScript">
            document.write(theInput.value);
        </script>
    </h1>

编辑：第二部分，现在代码适用于警报，但我需要在别处使用它（就像我说的那样）并且该变量在html的其他部分中不可用。上面，我只是想让它显示与html的一部分相同的值。它可能是我的JS，但这是很漂亮的样板，所以我认为它与变量的位置有关。

我需要在其他地方使用它吗？我已经添加了上面的下一个div来显示我正在尝试的内容。

- 意外地在第二部分中留下了变量的额外声明，这是我正在尝试的测试之一，现在被移除。

Answer 1

现在，您alert的对象是HTML元素，而不是字符串。您可以使用value属性获取其值：

alert('you chose ' + theInput.value)

（请注意，你可能没有意思是：

var theInput = document.getElementById('txtvarInput').value;

正如其他答案所示，因为那会给你一个空字符串。它只读了一次。）

Answer 2

您正在尝试输出您选择的整个HTML对象，而不是它的value-property。由于alert()期望一个字符串，JavaScript会为您提供该对象的字符串表示形式[object HTMLInputElement]。

请改为尝试：

var theInput = document.getElementById('txtvarInput').value;

Answer 3

在警报中，使用

theInput.value

Answer 4

您需要使用value属性：

  var theInput = document.getElementById('txtvarInput').value;

Answer 5

您忘了 .value

类似的东西：

   document.getElementById('txtvarInput').value

Answer 6

var theInput = document.getElementById('txtvarInput');

应该是

var theInput = document.getElementById('txtvarInput').value;

Answer 7

您将在页面加载时打印输入值。你会得到一个空警报。

就这样做！

    <input name="submit" type="submit" class="btn" value="Select" onclick="alertVal()"/>
    <script language="JavaScript" type="Text/JavaScript">
function alertVal(){
        var theInput = document.getElementById('txtvarInput').value;
        alert('you chose ' + theInput);

}
    </script>

分配html表单输入JS变量

7 个答案: