Question

我一直试图从HTML中获取文本输入并尝试将文本输出回HTML但由于某种原因它似乎无法正常工作。将输入放在表单中是否会改变与getElementById的交互，或者第二个按钮的使用是否可能会中断这个？

＆＃13;

    $(document).ready(function(){
      $("#submit").on("click",function(){
        var test = document.getElementById("searchInput");
        $("#text").html(test);
      })
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
          <input type ="text" id ="searchInput"><br>
          <button id = "submit">Search</button>
          <button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
      </form>
    
      <div id = "text">
        <h1>test</h1>
      </div>

＆＃13;

编辑：我试图改变

var test = document.getElementById("searchInput");

到

var test = document.getElementById("searchInput").value;

以前它仍然无法正常工作。是否存在我失踪的失败的互动？此外，我希望能够将输入存储为变量，这就是为什么我在输出它之前故意将其输入变量。

EDIT2：除了检索值之外，代码没有什么特别错误。我目前正在使用codepen.io进行编码，并没有将jquery加载到笔中。

Answer 1

由于您正在使用jQuery，因此使用jQuery获取元素的值会更有意义：

使用此选项始终将#text元素内容替换为#searchInput值：

$("#text").html($("#searchInput").val());

使用此选项将#searchInput值附加到#text元素：

$("#text").append($("#searchInput").val());

但整个逻辑没有任何意义。您正在更改元素的值，使其超出您提交的表单。要么阻止提交表单提交按钮点击事件，要么将表单中的#text元素设置为input，textarea或hidden字段：

$(document).ready(function(){
  $("#submit").on("click",function(e) {
    e.preventDefault();
    $("#text").html($("#searchInput").val());
  })
});

或在表单中使用#text元素进行提交：

<form>
    <input type="hidden" id="text" name="text">
    <input type ="text" id ="searchInput"><br>
    <button id = "submit">Search</button>
    <button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>

Answer 2

您使用表单元素，因此一旦您单击该按钮，表单将被重新加载，如果您想要删除表单元素的文本框值。

     <input type ="text" id ="searchInput"><br>
      <button id = "submit">Search</button>
      <button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>


  <div id ="text">
    <h1 id="welc"></h1>
  </div>

  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" type="text/javascript"></script>
  <script>
  $(document).ready(function(){
    $("#submit").on("click",function(){     
    var test = $('#searchInput').val();  
    $("h1").html(test);
  });
});
  </script>

只需删除标记，然后进行检查。

Answer 3

您需要找到元素的值，然后将其设置为HTML。

ROW_NUMBER() OVER ()

Answer 4

我已经更新了你的问题伙伴检查这个。

    $(document).ready(function(){
      $("#submit").on("click",function(){
        var test = document.getElementById("searchInput").value;
        $("#text").html(test);
      })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
          <input type ="text" id ="searchInput"><br>
          <button id = "submit">Search</button>
          <button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
      </form>
    
      <div id = "text">
        <h1>test</h1>
      </div>

Answer 5

我认为这对你有用。

<! doctype HTML>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
    <form>
        <input type="text" id="searchInput">
        <br>
        <button type="button" id="submit">Search</button>
        <button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
    </form>

    <div id="text">
        <h1>test</h1>
    </div>
</body>
<script>
    $(document).ready(function () {
        $("#submit").on("click", function () {
            $("#text").html($("#searchInput").val());
        })
    });
</script>

</html>

Answer 6

编辑您的JS代码请尝试：编辑：

$(document).ready(function(){
  $("#submit").on("click",function(){
    var test = $("#searchInput").val();
    $("#text").html(test);
  })
});

HTML输入到Javascript变量

6 个答案: