JQuery找不到文本区域值

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打印到控制台。我希望得到我的文本区域的值，而不是未定义的。

如何获得预期的输出？

Answer 1

更换线路

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

带有

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

---

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

我的解决方案将查找您的Story_Link文本区域。我使用哈希符号通过id查找该文本区域。

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

• 按类选择元素https://api.jquery.com/class-selector/
• 按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对象提供与元素匹配的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并不像现在那么成熟；香草"；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>是要使用的正确元素
• CCD_ 9在CCD_好几年了
• 你真的不应该结束你的段落，然后它们下面的内容，使用一个break将自己与下一个分隔开段落段落是完整的想法。查看更新后的HTML在上面的回答中

Answer 3

将脚本代码更改为以下

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

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

示例：选择id为myId 的元素

$('#myId')

选择类别为myClass 的元素

$('.myClass')

此外，HTML中的p标记没有附加值如果你想在文本区域中获得值，你应该选择测试区域的id

Answer 4

您想要从文本区域获取值/text，因此您必须编写：

$('#Story_Link').val()