访问元素

Question

我想从我的html输入字段接收一个整数，然后运行一个javascript文件，显示我刚刚提交的内容。

我错过了什么？

HTML：

 <body>
        <![endif]-->
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
        <script src="js/server_browse.js"></script>
        <p>Search the Database</p>
        <p>Enter the PO number:</p>

        <form id="PO" action="js/server_browse.js">
            PO:
            <input name="entry" type="number">
            <input type="submit">
        </form>

单独的javascript文件：

function output() {
    var x = document.getElementsByTagName("PO");
    var y = Number(x.elements["entry"]);
    var g = y.toString();
    document.write(g);
}

我很清楚javascript是多么笨重，我只想确保一切正常。

Answer 1

访问元素

getElementsByTagName返回类似数组的列表元素，而不是单个元素
PO不是代码名称，代码名称为form
PO是 ID ，请使用getElementById

获取值

HTML元素对象不是该对象的值。您需要访问.value属性

Answer 2

非常快，我觉得我们应该讨论代码的上半部分。实际上，当您尝试快速添加测试内容时，您只使用CDN。甚至jQuery也会告诉你不要在生产环境中链接到他们的文件，因为你永远不知道他们的服务器什么时候会关闭或者被请求充斥。包括你自己的jQuery副本 - 这就是你首先下载它的原因。另外，避免document.write()，你会更喜欢自己。如果您需要检查某些内容的值，但又不想将其添加到文档中，请使用console.log并检查浏览器的开发人员控制台。

<!--<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 In production, it is NOT recommended to use this. 
<script>
  window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')
</script>
   just include the local version of jQuery automatically. -->
<script src="js/vendor/jquery-1.12.0.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/server_browse.js"></script>

接下来的事实是你包含了jQuery，但是从不使用它。 jQuery虽然是一个相当紧凑的库，但仍然是浏览器必须加载的额外脚本才能继续前进。如果你不打算使用它，那就去掉吧。如果你要使用它，那么让我们确保我们正确使用它。

最后，你有这个输出功能，据我所知，它没有附加到任何东西。我没有看到您指示浏览器随时运行该功能的单一位置。

以下是我将为此片段做的事情。

$(function() {
  $('#PO :submit').on('click', function(e) {
    //Normally I would use $('#PO').on('submit'...
    //But the sandbox model doesn't allow for that to work correctly. So, we are using this.
    e.preventDefault();
    var $this = $(this);
    //Notation I use to have the jQuery object and regular object of this event;
    var value = $this.siblings('[name="entry"]');
    //If using this function from the form, this line would change to 
    //var value = $this.find('[name="entry"]');
    $('#results').html("Input value: " + value.val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="PO" action="js/server_browse.js">
  PO:
  <input name="entry" type="number">
  <input type="submit">
</form>
<div id="results"></div>

没有jQuery

如果你想获得相同的结果但不使用jQuery（即使你包含它）：

window.addEventListener('load', function() {

  var element = document.getElementById('PO-submit');
  //When not using a snippet, change to document.getElementById('PO');

  element.addEventListener('click', function(e) {
    //change to element.addEventListener('submit',... 
    e.preventDefault();
    e.cancelBubble = true;

    var result_div = document.getElementById('results');
    //Get the HTMLElement for the results ID element.

    var form_input = this.form.elements['entry'];
    //Change to this.elements['entry'];

    result_div.innerHTML = 'Results :' + form_input.value;

  });



});

<form id="PO">
  PO:
  <input name="entry" type="number">
  <input id="PO-submit" type="submit">
</form>
<div id="results"></div>

如何使用javascript显示HTML文本框中的输入

2 个答案:

访问元素

获取值

没有jQuery