How to capture value of a paragraph inside a div?

Question

How to capture value of a paragraph inside a div?

Navigation

#1 by (2 votes)

1

I ask your help to capture the value of a paragraph h4 that is within a specific div , and put in a text field of a form. It is to automate a group name / singer's response system to an online radio.

This is div where is the information I need:

<div class="player">
    <div>
      <h4>CANTOR</h4>
      <h5>MÚSICA</h5>
      <span></span>
    </div>"

html div

asked by anonymous 04.01.2016 / 23:59

1 answer

jQuery, close button works only once Pass PHP parameters to JQuery Mobile Panel

score 2 · Answer 1

The first thing you should do is capture these elements. You can do this through id , as follows:

HTML

<h4 id="cantor">CANTOR</h4>
<h5 id="musica">MÚSICA</h5>

Javascript

To select the element by id, use document.getElementById() . Or document.querySelector("#ID") , using, in the latter case, the # selector.

var cantor = document.getElementById("cantor").innerHTML;
var musica = document.getElementById("musica").innerHTML;

Already the capture of what is inside is done with the .innerHTML method. All of the above code is in Pure Javascript.

Example

Since you did not make your text box code available, I've created one:

var cantor = document.getElementById("cantor").innerHTML;
var musica = document.getElementById("musica").innerHTML;

var input = document.getElementById("textoCopia");

input.value = cantor + " - " + musica;

<div class="player">
  <div>
    <h4 id="cantor">CANTOR</h4>
    <h5 id="musica">MÚSICA</h5>
    <span></span>
  </div>
</div>

<input type="text" id="textoCopia">

Editing

Since this code is already ready and you already have a class="player" , just select it and from it you have access to h4 and h5 element. You can do this as you are using JQuery:

var cantor = $('.player div h5').text();
var musica = $('.player div h4').text();

$('input').val(cantor + " - " + musica);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="player">
  <div>
    <h4>CANTOR</h4>
    <h5>MÚSICA</h5>
    <span></span>
  </div>
</div>

<input type="text">

See if it suits you, I did not add anything to the HTML, I just made the selection with JQuery and added a input as an example.