无法使用 jQuery 从输入字段将文本插入 HTML答案

【问题标题】：Unable to insert text into HTML from input field using jQuery无法使用 jQuery 从输入字段将文本插入 HTML
【发布时间】：2015-03-22 04:18:17
【问题描述】：

我是编程新手，我一直在尝试使用 jQuery 编写一个脚本，该脚本将从输入字段中获取值，并在单击按钮后将其插入段落中。

这是我的 HTML：

    <form>
      <div class="form-group">
        <label for="lowercase">lowercase</label>
        <input id="lowercase" class="form-control" type="text" placeholder="type in lowercase">
      </div>
      <button type="submit" id="button" class="btn">Convert Text to Uppercase</button>  
    </form>
  </div>
  <div id="uppercasetext">
    <h3>UPPERCASE</h3>
    <p id="convertedtext"></p>
  </div>

这是我写的 jQuery：

$((function() {
 $("#button").onClick(function(){
     ("#convertedtext").val($("#lowercase").val());
 });
});

我做错了什么？提前致谢

【问题讨论】：

使用 jQuery().text() 而不是 jQuery().val() 函数。 jQuery().val() 仅适用于输入和选择字段

标签： jquery forms text insert field

【解决方案1】：

试试这个：-

$(function() {  //remove one extra bracket from here
  $("#button").click(function(){ // instead of 'onClick' use 'click'
     $("#convertedtext").text($("#lowercase").val()); // instead of '.val()' use '.text()' or '.html()'
  });
});

或

$(function() {  //remove one extra bracket from here
  $("#button").on("click",function(){ // instead of 'onClick' use 'click'
     $("#convertedtext").text($("#lowercase").val()); // instead of '.val()' use '.text()' or '.html()'
  });
});

【讨论】：

【解决方案2】：

如果你想使用这个追加：

$(function() {
     $("#button").click(function(){
         $("#convertedtext").append($("#lowercase").val());
     });
});

如果你想使用这个插入：

$(function() {
     $("#button").click(function(){
         $("#convertedtext").html($("#lowercase").val());
     });
});

【讨论】：

【解决方案3】：

执行以下步骤

包含 jquery 文件
将按钮类型更改为按钮，这样您的表单将不会在点击时提交。
在头部包含以下代码

代码

$(document).ready(function(){
    $("#button").on('click', function(){
        $("#convertedtext").html($("#lowercase").val());
    });
});

【讨论】：

【解决方案4】：

使用点击事件

$((function() {
 $("#button").on("click",function(){
    $("#convertedtext").text($("#lowercase").val());
 });
});

在 jQuery 中没有 onClick 它在 javascript 中。即使在这种情况下，您也必须在输入标签内使用它，而不是在它之外。喜欢<input type="text" onClick="your_function()".....

【讨论】：

而不是("#convertedtext").val($("#lowercase").val());，应该是$("#convertedtext").text($("#lowercase").val());，你错过了$，而不是.val()，应该是.html()或.text()，如我的回答所示。
@Kartikeya，是的，我忽略了它，我认为它只是 onClick 问题:) 顺便谢谢

【解决方案5】：

非常感谢您的所有回答和如此迅速的回答。我尝试了建议的答案，但由于某种原因我仍然无法让它工作。我以一个有效的解决方案结束。我相信专业人士有更好的方法来做到这一点。我真的很想知道您对这种方法的看法。

CSS：

p.uppercase{
 text-transform: uppercase;
}

jQuery:

$(document).ready(function(){
    $("#blanks form").submit(function(event){
      var lowercase = $("input#lowercase").val();
      $(".uppercase").text(lowercase);
      event.preventDefault();
    });
 });

HTML：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/uppercase.css">
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/uppercase.js"></script>

    <title>Uppercase</title>
  </head>
  <body>
     <div class="container">
  <h2>Type something in all lowercase and see it in uppercase.</h2>
  <div id="blanks">
    <form>
      <div class="form-group">
        <label for="lowercase">lowercase</label>
        <input id="lowercase" class="form-control" type="text" placeholder="type in lowercase">
      </div>

      <button type="submit" class="btn">Convert Text to Uppercase</button>  
    </form>
  </div>

  <div id="uppercasetext">
    <h3>UPPERCASE</h3>
    <p>Here is your text in uppercase: <span class="uppercase"></span></p>

     </div> 
   </div>       

 </body>
</html>

【讨论】：