javascript - TextArea Undefined-JQuery 的 ID

问题描述

我有以下jqueryCode：

$(document).ready(displayItems);
$(document).ready(getAreaIndex);


function displayItems()
{
$.ajax({
    type:"GET",
    url:"http://tsg-vending.herokuapp.com/items",
    success:function(data){
        var div = $("#div1");
        var html="";
        var formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        });
        for(let i=0;i<data.length;i++)
        {
            var itemId = data[i].id;
            if(i%3==0)
            {
                html+="<br><br><br><br>";
            }
            html+='<textarea readonly  rows="4" cols="60" style="overflow:hidden" id="' + itemId + '">'+ (i+1) + ' \n                                 ' + data[i].name + ' \n                                 ' + formatter.format(data[i].price) + ' \n                                Quantity Left:  '+ data[i].quantity + '</textarea>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
        }
        div.append(html);
        //console.log(html);
    },
    error: function()
    {
        console.log("Issue");
    }
    //add error here

    });
    /*
    $("textarea").each(function(){
    $text = this.value;
    console.log(text);
    });
    */
 }
 function getAreaIndex()
 {
   console.log($("#21").val());

    $("textarea").each(function(){
    $text = this.value;
    console.log(text.charAt(0));
    });

 }

我正在尝试通过 jquery 将 textareas 动态添加到我的 html 页面上的 div 中。文本区域 id 由对正常运行的 api 的 ajax 响应生成。textarea 确实在 html 页面上正确附加，但是当尝试打印给定已知 ID 的 textarea 值时，它显示未定义。我什至尝试通过所有 textareas 做一个 .each ，它甚至从来没有进入循环。我在 getAreaIndex() 中执行此操作，将其打印到控制台（id #21 是生成的有效文本区域 id）。

如果需要，以下是 html 页面：

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Vending Machine</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <!-- Additional CSS files here -->
</head>
<body>
    <div class="container-fluid" id="homeview">
    <div class="row">
    <div class="col-sm-12">
    <h1 style="text-align:center">Vending Machine</h1>
     <hr>
    </div>
    </div>
    <div class="row"> 
    <div class="col-sm-9" id="div1">
    <!-- Textareas go here -->
    </div>
    <div class="col-sm-3 float-right" id="Form1">
    Total $ In<br>
    <input type="text" id="moneyIn"><br><br>
    <button id="addDollar">Add Dollar</button>
    <button id="addQuarter">Add Quarter</button><br><br>
    <button id="addDime">Add Dime</button>
    <button id="addNickel">Add Nickel</button>
    <hr style="width:30% ;margin-left:0"><br>
    Messages<br>
    <input type="text" id="messages"><br><br>
    Item: <input type="text" id="itemNumber" style="display:block"><br><br>
    <button id="makePurchase">Make Purchase</button>
    <hr style="width:30% ;margin-left:0"><br>
    Change<br><br>
    <input type="text" id="change">
    </div>
    </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script src="VendingMachine.js"></script>
</body>
</html>

在“id=div1”之后插入文本区域

标签： javascripthtmljquerytextarea

javascript - TextArea Undefined-JQuery 的 ID

问题描述

解决方案

推荐阅读