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