How to make selector next and prev on XML elements

Navigation
0

I'm having a hard time eluting 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()" />

I 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);
   }
}
    
asked by anonymous 03.02.2017 / 02:51

1 answer

0

Here's 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 out now the changes that were needed to get the perfect working out

Before mostrar(i)

Then mostrar()

It was not necessary to argue var i on the mostrar function, with no effect on the function.

Before xmlDoc.getElementsByTagName("carta");

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

It was vitally important to set a% vector index with%, 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>";

Then 

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 tag in XML has already been added to [0] , it was necessary to just go through a certain group of items at a time, as it was before it was not possible.

Before

<item>

Then

el = xmlDoc.getElementsByTagName("carta");

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

Note that a new el = registro.getElementsByTagName("item"); has been set for element var registro , getting carta (emento) for new tag var el

Ready !!! However this has been successfully run.

    
03.02.2017 / 05:40
Encrypt database CodeIgniter Redirect Page in response AJAX in Asp.net Mvc