Question

我是编程新手，我一直在尝试使用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());
 });
});

我做错了什么？提前致谢

Answer 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()'
  });
});

OR

$(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()'
  });
});

Answer 2

使用点击事件

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

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

Answer 3

如果您想使用此附加：

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

否则，如果您想使用此插入：

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

Answer 4

执行以下步骤

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

代码

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

Answer 5

非常感谢您的所有答案以及如此迅速地回答。我尝试了建议的答案但由于某种原因我仍然无法让它工作。我结束了一个有效的解决方案。我相信PRO有一个更好的方法。我真的很想知道你对这种方法的想法。

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>

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

5 个答案: