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

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

我做错了什么？提前致谢

试试这个：-

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

如果要

使用以下命令进行追加：

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

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

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

执行以下步骤

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

法典

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

使用 click 事件

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

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

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

.CSS：

p.uppercase{
 text-transform: uppercase;
}

j查询：

$(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>

相关内容

最新更新

热门标签：