How to get text inside <p> tag

Question

I want to get the string inside "p" tag, when the string was changes i'll still able to get the latest string.

But I've no idea how to get the string from the "p" tag.

Tested few way including:

1. .text();

2. .val(); (i know it was reserve for input, just trying...)

3. .innerHTML();

My HTML:

<p id="testprint">Original String</p>
<p id="getString"> EMPTY  </p>
<button id="Generate">Generate</button>
<button id="Change">Change</button>
<button id="getStr">Get String to first "p" tag</button>

My JavaScript:

function print1st(){
    document.getElementById('testprint').innerHTML = "Generated New String";
}

function changeValue(){
    document.getElementById('testprint').innerHTML = "Change String Success";
}

function getStrfrom1st(){
    copystr = document.getElementById('testprint').text();
  //copystr = document.getElementById('testprint').val();
  //copystr = document.getElementById('testprint').html();
  //copystr = document.getElementById('testprint').innerHTML();
  document.getElementById('getString').innerHTML = copystr;
}

document.getElementById('Change').addEventListener('click',changeValue,false);
document.getElementById('Generate').addEventListener('click',print1st,false);
document.getElementById('getStr').addEventListener('click',getStrfrom1st,false);

Expecting Result:

Once clicked generate button generate new string, once click "Get String" button will get the result "Generated New String".

Else if i click 2nd button changed the first value, once i click 3rd button will get the changed string.

Here is my JSFiddle: https://jsfiddle.net/pxaw9xt4/1/

Answer 1

Please check your browser console, you could see the following error :

TypeError: document.getElementById(...).text is not a function

And that right .text() isn't a javascript function (the both text() & val() are jQuery methods), so you should use .innerHTML or .textContent like :

copystr = document.getElementById('testprint').innerHTML;

NOTE : The .innerHTML() method doesn't exist.

Hope this helps.

 function print1st(){ document.getElementById('testprint').innerHTML = "Generated New String"; } function changeValue(){ document.getElementById('testprint').innerHTML = "Change String Success"; } function getStrfrom1st(){ copystr = document.getElementById('testprint').innerHTML; document.getElementById('getString').innerHTML = copystr; } document.getElementById('Change').addEventListener('click',changeValue,false); document.getElementById('Generate').addEventListener('click',print1st,false); document.getElementById('getStr').addEventListener('click',getStrfrom1st,false); 

 <p id="testprint">Original String</p> <p id="getString"> EMPTY </p> <button id="Generate">Generate</button> <button id="Change">Change</button> <button id="getStr">Get String to first "p" tag</button> 

Answer 2

Use this to get the textual content within an HTML DOM.

var copystr = document.getElementById("testprint").textContent;

Updated & working fiddle here .

Answer 3

You're confusing jQuery functions with vanilla JS. val() and text() are all functions defined in jQuery, and thus cannot be called on vanilla JS nodes. Since you've tagged this using jQuery, why not use jQuery for everything? Your entire snippet can be written as follows using on() :

 $('#Change').on('click', function() { $('#testprint').text('Change String Success'); }); $('#Generate').on('click', function() { $('#testprint').text('Generated New String'); }); $('#getStr').on('click', function() { $('#getString').text( $('#testprint').text() ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="testprint">Original String</p> <p id="getString"> EMPTY </p> <button id="Generate">Generate</button> <button id="Change">Change</button> <button id="getStr">Get String to first "p" tag</button> 

---

Alternatively, if you'd prefer to handle this using vanilla JS only, you can use the innerHTML property as follows:

 function print1st() { document.getElementById('testprint').innerHTML = "Generated New String"; } function changeValue() { document.getElementById('testprint').innerHTML = "Change String Success"; } function getStrfrom1st() { copystr = document.getElementById('testprint').innerHTML; document.getElementById('getString').innerHTML = copystr; } document.getElementById('Change').addEventListener('click',changeValue,false); document.getElementById('Generate').addEventListener('click',print1st,false); document.getElementById('getStr').addEventListener('click',getStrfrom1st,false); 

 <p id="testprint">Original String</p> <p id="getString"> EMPTY </p> <button id="Generate">Generate</button> <button id="Change">Change</button> <button id="getStr">Get String to first "p" tag</button> 

Answer 4

Using Jquery You can use on method for adding click event to button and using #id selector we can get / set the text for the p tag

 $('#Change').on('click', function() { $('#testprint').text('Change String Success'); }); $('#Generate').on('click', function() { $('#testprint').text('Generated New String'); }); $('#getStr').on('click', function() { $('#getString').text( $('#testprint').text() ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="testprint">Original String</p> <p id="getString"> EMPTY </p> <button id="Generate">Generate</button> <button id="Change">Change</button> <button id="getStr">Get String to first "p" tag</button> 

Answer 5

您可以用设置方法相同的方式获取值

copystr = document.getElementById('testprint').innerHTML ;

Answer 6

Just use textContent .

Example :

var copystr = document.getElementById('testprint').textContent;

Here the updated JsFiddle

Answer 7

innerHTML shouldn't include brackets. Check the jsfiddle

copystr = document.getElementById('testprint').innerHTML;

https://jsfiddle.net/pxaw9xt4/7/