CODEWITHSUNDEEP
javascriptjqueryhtml
Jake Cube
Jake Cube

Reputation: 143

How to get text inside <p> tag

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/

Upvotes: 0

Views: 23771

Answers (7)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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>

Upvotes: 3

Lasithds
Lasithds

Reputation: 2291

innerHTML shouldn't include brackets. Check the jsfiddle

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

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

Upvotes: 0

Yogesh Mistry
Yogesh Mistry

Reputation: 2152

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

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

Updated & working fiddle here.

Upvotes: 2

BenM
BenM

Reputation: 53198

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>

Upvotes: 1

Abi
Abi

Reputation: 734

Using Jquery You can use onmethod 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>

Upvotes: 1

OrcusZ
OrcusZ

Reputation: 3660

Just use textContent.

Example :

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

Here the updated JsFiddle

Upvotes: 0

Der Flo
Der Flo

Reputation: 62

You can get the value the same way you set it

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

Upvotes: 0

Related Questions