How to include selector next and Prev on XML elements

Asked

Viewed 114 times

0

I’m having trouble eliciting XML elements on flow control Prev/next, what I have is:

Code

function mostrar(i) {

var txt, parser, xmlDoc;
txt = "<carta>" +
   "<para>Marcos</para>" +
   "<de>Luciana</de>" +
   "<assunto>Pagamento</assunto>" +
   "<body>Quando foi efetuado o pagamento conosco?</body>" +
   "<para>Milena</para>" +
   "<de>Gustavo</de>" +
   "<assunto>Compra</assunto>" +
   "<body>Você acabou de adquirir um produto aqui!</body>" +
   "<para>Neiva</para>" +
   "<de>Lucas</de>" +
   "<assunto>Venda</assunto>" +
   "<body>Você tem experiencia com vendas diretas?</body>" +
   "</carta>";

parser = new DOMParser();
var xmlDoc = parser.parseFromString(txt,"text/xml");
el = xmlDoc.getElementsByTagName("carta");
document.getElementById("exibir").innerHTML =
    "Para: " +
    el[i].getElementsByTagName("para")[0].childNodes[0].nodeValue +
    "<br>De: " +
    el[i].getElementsByTagName("de")[0].childNodes[0].nodeValue +
    "<br>Mensagem: " + 
    el[i].getElementsByTagName("body")[0].childNodes[0].nodeValue;
}

var i = 0;

mostrar(i);

function next() {
if (i < el.length - 1) {
    i++;
    mostrar(i);
}
}

function prev() {
   if (i > 0) {
   i--;
   mostrar(i);
   }
}
<div id='exibir'> &nbsp; </div>

<hr size='1' color='silver' />

<input type="button" value="&#171 prev" onclick="prev()" />

<input type="button" value="next &#187 " onclick="next()" />

Need to implement in the above code, these Javascript selectors just below:

var i = 0;

mostrar(i);

function next() {
    if (i < el.length - 1) {
        i++;
        mostrar(i);
    }
}

function prev() {
   if (i > 0) {
       i--;
       mostrar(i);
   }
}
javascript xml dom

1 answer

0


Follows the answer:

function mostrar() {

var txt, parser, xmlDoc;
txt = "<carta>" +
    "<item>" +
    "<para>Marcos</para>" +
    "<de>Luciana</de>" +
    "<assunto>Pagamento</assunto>" +
    "<body>Quando foi efetuado o pagamento conosco?</body>" +
    "</item>" +
    "<item>" +
    "<para>Milena</para>" +
    "<de>Gustavo</de>" +
    "<assunto>Compra</assunto>" +
    "<body>Você acabou de adquirir um produto aqui!</body>" +
    "</item>" +
    "<item>" +
    "<para>Neiva</para>" +
    "<de>Lucas</de>" +
    "<assunto>Venda</assunto>" +
    "<body>Você tem experiencia com vendas diretas?</body>" +
    "</item>" +
    "</carta>";

parser = new DOMParser();
var xmlDoc = parser.parseFromString(txt, "text/xml");
registro = xmlDoc.getElementsByTagName("carta")[0];
el = registro.getElementsByTagName("item");
document.getElementById("exibir").innerHTML =
    "Para: " +
    el[i].getElementsByTagName("para")[0].childNodes[0].nodeValue +
    "<br>De: " +
    el[i].getElementsByTagName("de")[0].childNodes[0].nodeValue +
    "<br>Mensagem: " +
    el[i].getElementsByTagName("body")[0].childNodes[0].nodeValue;
}

var i = 0;

mostrar();

function next() {
    if (i < el.length - 1) {
        i++;
        mostrar();
    }
}

function prev() {
    if (i > 0) {
        i--;
        mostrar();
    }
}
<div id='exibir'> &nbsp; </div>

<hr size='1' color='silver' />

<input type="button" value="&#171 prev" onclick="prev()" />

<input type="button" value="next &#187 " onclick="next()" />

Check now the changes that have been made necessary to get the perfect functioning

Before mostrar(i)

Afterward mostrar()

No need to argue var i about the function mostrar, without any effect on the function.

Before xmlDoc.getElementsByTagName("carta");

Afterward xmlDoc.getElementsByTagName("carta")[0];

It was of vital importance to set a vector index [0], we will see why of this in the following explanation below.

Before

txt = "<carta>" +
    "<para>Marcos</para>" +
    "<de>Luciana</de>" +
    "<assunto>Pagamento</assunto>" +
    "<body>Quando foi efetuado o pagamento conosco?</body>" +
    "<para>Milena</para>" +
    "<de>Gustavo</de>" +
    "<assunto>Compra</assunto>" +
    "<body>Você acabou de adquirir um produto aqui!</body>" +
    "<para>Neiva</para>" +
    "<de>Lucas</de>" +
    "<assunto>Venda</assunto>" +
    "<body>Você tem experiencia com vendas diretas?</body>" +
    "</carta>";

Afterward

txt = "<carta>" +
   "<item>" +
   "<para>Marcos</para>" +
   "<de>Luciana</de>" +
   "<assunto>Pagamento</assunto>" +
   "<body>Quando foi efetuado o pagamento conosco?</body>" +
   "</item>" +
   "<item>" +
   "<para>Milena</para>" +
   "<de>Gustavo</de>" +
   "<assunto>Compra</assunto>" +
   "<body>Você acabou de adquirir um produto aqui!</body>" +
   "</item>" +
   "<item>" +
   "<para>Neiva</para>" +
   "<de>Lucas</de>" +
   "<assunto>Venda</assunto>" +
   "<body>Você tem experiencia com vendas diretas?</body>" +
   "</item>" +
   "</carta>";

Note that a new XML tag has now been included <item>, it was necessary for us to go through only a certain group of items at a time, as before it was not possible.

Before

el = xmlDoc.getElementsByTagName("carta");

Afterward

registro = xmlDoc.getElementsByTagName("carta")[0];

el = registro.getElementsByTagName("item");

Note here that a new one has been defined var registro for element carta, getting the var el(menu) for the new tag item

Ready!!! However this was carried out functioning successfully.

Browser other questions tagged javascript xml dom

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