javascript - JQuery does not find textarea value

Question

I have a textarea in my HTML file, and I want to send its content to the console. Here the code:

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

But it prints out hello undefined to the console. I expected to get the value of my textarea instead of undefined.

How to get the expected output?

question from:https://stackoverflow.com/questions/65945385/jquery-does-not-find-textarea-value

Answer 1

Replace your line

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

with

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

---

You tried to get the value from a <p> tag and you missed the . class selector.

My solution will lookup for your Story_Link textarea I used the hash sign for finding that textarea by id.

Here you will find more information about how to find elements in HTML DOM with jquery:

• Select elements by class https://api.jquery.com/class-selector/
• Select elements by id https://api.jquery.com/id-selector/
• Every kind of selectors in jquery https://api.jquery.com/category/selectors/

---

Here I got you a working example:

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>