JQuery 没有找到textarea值

Question

我的 HTML 文件中有一个文本区域，我想将其内容发送到控制台。 这里的代码：

<p class="i_link">Link:</p>
<textarea name="link" id="Story_Link" cols="100" rows="1"></textarea><br>
<!--!name-->
<p class="i_name">Name:</p>
<textarea name="name" id="Story_Name" cols="50" rows="1"></textarea><br>
<!--!number-->
<p class="i_number">Number:</p>
<textarea name="number" id="Story_Number" cols="1" rows="1"></textarea><br>
<!--!author-->
<p class="i_author">Author:</p>
<textarea name="author" id="Story_Author" cols="50" rows="1"></textarea><br>
<button onclick="myFunction()">Click me</button>
​
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
​
<script>
function myFunction() {
   console.log('hello ' + $('i_link').val())
}
</script>

但是它向控制台打印出hello undefined 。 我希望得到我的 textarea 的值而不是未定义的。

如何得到预期的output？

Answer 1

更换您的线路

console.log('hello ' + $('i_link').val())

和

console.log('hello ' + $('#Story_Link').val())

---

您试图从<p>标记中获取值，但您错过了. class 选择器。

我的解决方案将查找您的 Story_Link textarea 我使用 hash 标志通过 id 查找该 textarea。

在这里，您将找到有关如何使用 jquery 在 HTML DOM 中查找元素的更多信息：

• Select 元素由 class https://api.jquery.com/class-selector/
• Select 元素按 id https://api.jquery.com/id-selector/
• jquery https://api.jquery.com/category/selectors/中的各种选择器

---

在这里，我为您提供了一个工作示例：

 function myFunction() { console.log('hello ' + $('#Story_Link').val()) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="i_link">Link:</p> <textarea name="link" id="Story_Link" cols="100" rows="1"></textarea><br> <:--:name--> <p class="i_name">Name:</p> <textarea name="name" id="Story_Name" cols="50" rows="1"></textarea><br> <!--!number--> <p class="i_number">Number:</p> <textarea name="number" id="Story_Number" cols="1" rows="1"></textarea><br> <!--!author--> <p class="i_author">Author:</p> <textarea name="author" id="Story_Author" cols="50" rows="1"></textarea><br> <button onclick="myFunction()">Click me</button>

Answer 2

您的问题是您没有向 jQuery object 提供与元素匹配的 CSS 选择器，因此它找不到任何元素来获取其值。 如果您尝试获取作者姓名，则需要传递#Story_Author ，因为这是输入数据的textarea的id 。

 <p class="i_link">Link:</p> <textarea name="link" id="Story_Link" cols="100" rows="1"></textarea><br> <:--:name--> <p class="i_name">Name:</p> <textarea name="name" id="Story_Name" cols="50" rows="1"></textarea><br> <:--.number--> <p class="i_number">Number.</p> <textarea name="number" id="Story_Number" cols="1" rows="1"></textarea><br> <.--.author--> <p class="i_author">Author.</p> <textarea name="author" id="Story_Author" cols="50" rows="1"></textarea><br> <button onclick="myFunction()">Click me</button> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> function myFunction() { console.log('hello ' + $('#Story_Author').val()) } </script>

但是，除此之外，您还有很多问题。

jQuery 是一个功能强大的 JavaScript 库，可以使非常复杂的事情变得更加简单。 首次引入时，核心 JavaScript 语言以及 DOM API 并不像现在这样成熟，因此即使是“vanilla”JavaScript 中相对简单的查询也很麻烦。 情况不再如此，因此，不再需要 jQuery 来完成这些琐碎的任务。 对于您正在做的事情，jQuery 只会让事情变得更复杂。 在没有 jQuery 的情况下，您只需执行此操作即可：

 <p class="i_link">Link:<br> <input id="Story_Link"></p> <p class="i_name">Name:<br> <input id="Story_Name"></p> <p class="i_number">Number:<br> <input id="Story_Number"></p> <p class="i_author">Author:<br> <input id="Story_Author"></p> <button>Click me</button> <script> // Get references to any elements you'll reference more than once, just once const link = document.getElementById("Story_Link"); const name = document.getElementById("Story_Name"); const number = document.getElementById("Story_Number"); const author = document.getElementById("Story_Author"); // Do your event binding in JavaScript, not HTML document.querySelector("button").addEventListener("click", function(){ console.log('Hello ' + author.value + " Here are your details:"); console.log("\tStory Link: " + link.value); console.log("\tStory Name: " + name.value); console.log("\tStory Number: " + number.value); }); </script>

从上面可以看出，HTML就简单多了，不用引用jQuery，纯JavaScript也很简单。

此外：

• <textarea>用于多行输入。 当您只有一个短字符串要收集时， <input>是要使用的正确元素。
• script元素中已经不需要type="text/javascript"好几年了。
• 你真的不应该结束你的段落，然后在它们下面有相关的内容，这些内容使用中断将自己与下一段分开。 段落是为了完整的想法。 请参阅上述答案中更新的 HTML。

Answer 3

将您的脚本代码更改为以下

<script>
function myFunction() {
   console.log('hello ' + $('#Story_Author').val())
}
</script>

请注意。 在$('._link)中使用 jquery 时，您必须传递 class 的选择器或 class 的 id，您必须添加。 在开始和 id 你必须在开始时添加 #

示例：到 select id 为 myId 的元素

$('#myId')

到 select 元素与 class myClass

$('.myClass')

此外，HTML 中的 p 标签没有附加值，如果你想在 textarea 中获取值，你应该 select testarea 的 id

Answer 4

你想从 textarea 获取值/文本，所以你必须写：

$('#Story_Link').val()