How to capture the value of a paragraph within a div?

Asked

Viewed 2,867 times

1

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

This is the div where’s the information I need:

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

1 answer

2

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

HTML

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

Javascript

To select the element by id the document.getElementById(). Or the 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 method .innerHTML. All the above code is in Pure Javascript.

Example

Since you did not provide the code of your text box, I created a:

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

As this code comes ready and you already have a class="player", just select it and from it have access to the element h4 and h5. You can do it like this, since 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>
<div class="player">
  <div>
    <h4>CANTOR</h4>
    <h5>MÚSICA</h5>
    <span></span>
  </div>
</div>

<input type="text">

Make sure it fits, I didn’t add anything to the HTML, I just made the selection with Jquery and added a input as an example.

  • Good evening Samir, I forgot to tell you, the content H4 and H5 comes from a Radio Online page. Even so I can insert that id into the result that already comes ready? This is exactly what I need, actually just put the name of the Singer/Group in the Form. Thanks for that. Grateful, Jairo Almeida

  • All right, there are several other ways, but how do these pages get inserted? Iframe, include? And one more thing, you’re using Jquery?

  • Oi Samir, In the Home of Radio appears the name of the singer/group and the name of the song. I got the direct URL showing the same information without formatting: <div class="player"> <script type="text/javascript"> setTimeout(Function() { $.get("/musics/playing", Function(data) { $('#player').html(data); }) }, 10000); </script> </div>

  • Oi Samir, In the Home of Radio appears the name of the singer/group and the name of the song. I got the direct URL: radio.com/musics/playing.php When you’re playing some music, check out that DIV Player with those H4 and H5 and with each song you play it changes the values. When no song is playing Div gets only the script that picks up the songs when she is playing which is this: <div class="player"> <script type="text/javascript"> setTimeout(Function() { $.get("/musics/playing", Function(data) { $('#player').html(data); }) }, 10000); </script> </div>

  • 2

    @jairoalmeida I think it would be the case to ask another question with these new details, because the original question is answered imho, and well answered. Of course someone can still make another answer complementing this, with another variation of the same result for example, but I think that besides maybe Samir, the Santo rsrs, no one else will enter these details that you posted in the comments, simply because they are not in the question.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.