JavaScript

[Wellington_Gomes1]

Galera estou aprendendo DOM e Ajax!

estou manipulando o XML com javascript certo! oq eu estou querendo fazer e o seguinte! quando a pessoa quiser alterar o XML ela nao precisar mexer no Javascript. Ex: estou fazendo uma uma receitas e ja tenho meu css html e xml pronto, mais se eu quiser alterar o xml nao preciso alterar nada no js porem se eu colocar mais uma receita ela ja vai parecer na pagina WEB com cor e ja dentro do laço!
Me ajudem please!

Meu codigo js vou postar aq caso precisem dos outros eu coloco!

function executar() {
let requisicao = new XMLHttpRequest()

requisicao.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        let dados = this.responseXML
        let mr = document.getElementById("mostraReceitas").childNodes[1]
        let botoes = document.getElementsByClassName("nomeDasReceitas")
        let nomes = ""
        let ingredientes = ""
        let listaIngredientes

        //BOTÕES
        for (let i = 0; i < dados.getElementsByTagName("nome").length; i++) {
            let paragrafo = document.createElement("p")
            nomes = document.createTextNode(dados.getElementsByTagName("nome")[i].childNodes[0].nodeValue)
            paragrafo.appendChild(nomes)
            botoes[i].appendChild(paragrafo)
        }

        document.getElementById("receita1").addEventListener("click", function () {

            //NOME DA RECEITA
            let receita1 = ""
            receita1 = "<h3>" + dados.getElementsByTagName("nome")[0].childNodes[0].nodeValue + "</h3> <br>"

            //INGREDIENTES
            receita1 += "<p> <strong> Ingredientes: </strong> </p> <ul>"
            for (let j = 1; j < dados.getElementsByTagName("receita")[0].childNodes[3].childNodes.length; j += 2) {`Texto pré-formatado`
                receita1 += "<li>" + dados.getElementsByTagName("receita")[0].childNodes[3].childNodes[j].childNodes[0].nodeValue + "</li>"
            } receita1 += "</ul> <br>"

            //MODO DE PREPARO
            receita1 += "<p> <strong> Modo de Preparo: </strong> </p> <ol>"
            for (let k = 1; k < dados.getElementsByTagName("receita")[0].childNodes[5].childNodes.length; k += 2) {
                receita1 += "<li>" + dados.getElementsByTagName("receita")[0].childNodes[5].childNodes[k].childNodes[0].nodeValue + "</li>"
            } receita1 += "<ol> <br>"

            //IMAGENS
            receita1 += "<p> <strong> Imagens: </strong> </p>"
            for (let l = 1; l < dados.getElementsByTagName("receita")[0].childNodes[7].childNodes.length; l += 2) {
                receita1 += "<img src=\"/Imagens/" + dados.getElementsByTagName("receita")[0].childNodes[7].childNodes[l].childNodes[0].nodeValue + "\" width=\"250\"> <br>"
            }

            document.getElementById("mostraReceitas").innerHTML = receita1
        })

        document.getElementById("receita2").addEventListener("click", function () {

            //NOME DA RECEITA
            let receita2 = ""
            receita2 = "<h3>" + dados.getElementsByTagName("nome")[1].childNodes[0].nodeValue + "</h3> <br>"

            //INGREDIENTES
            receita2 += "<p> <strong> Ingredientes: </strong> </p> <ul>"
            for (let j = 1; j < dados.getElementsByTagName("receita")[1].childNodes[3].childNodes.length; j += 2) {
                receita2 += "<li>" + dados.getElementsByTagName("receita")[1].childNodes[3].childNodes[j].childNodes[0].nodeValue + "</li>"
            } receita2 += "</ul> <br>"

            //MODO DE PREPARO
            receita2 += "<p> <strong> Modo de Preparo: </strong> </p> <ol>"
            for (let k = 1; k < dados.getElementsByTagName("receita")[1].childNodes[5].childNodes.length; k += 2) {
                receita2 += "<li>" + dados.getElementsByTagName("receita")[1].childNodes[5].childNodes[k].childNodes[0].nodeValue + "</li>"
            } receita2 += "<ol> <br>"

            //IMAGENS
            receita2 += "<p> <strong> Imagens: </strong> </p>"
            for (let l = 1; l < dados.getElementsByTagName("receita")[1].childNodes[7].childNodes.length; l += 2) {
                receita2 += "<img src=\"/Imagens/" + dados.getElementsByTagName("receita")[1].childNodes[7].childNodes[l].childNodes[0].nodeValue + "\" width=\"250\"> <br>"
            }

            document.getElementById("mostraReceitas").innerHTML = receita2
        })

        document.getElementById("receita3").addEventListener("click", function () {

            //NOME DA RECEITA
            let receita3 = ""
            receita3 = "<h3>" + dados.getElementsByTagName("nome")[2].childNodes[0].nodeValue + "</h3> <br>"

            //INGREDIENTES
            receita3 += "<p> <strong> Ingredientes: </strong> </p> <ul>"
            for (let j = 1; j < dados.getElementsByTagName("receita")[2].childNodes[3].childNodes.length; j += 2) {
                receita3 += "<li>" + dados.getElementsByTagName("receita")[2].childNodes[3].childNodes[j].childNodes[0].nodeValue + "</li>"
            } receita3 += "</ul> <br>"

            //MODO DE PREPARO
            receita3 += "<p> <strong> Modo de Preparo: </strong> </p> <ol>"
            for (let k = 1; k < dados.getElementsByTagName("receita")[2].childNodes[5].childNodes.length; k += 2) {
                receita3 += "<li>" + dados.getElementsByTagName("receita")[2].childNodes[5].childNodes[k].childNodes[0].nodeValue + "</li>"
            } receita3 += "<ol> <br>"

            //IMAGENS
            receita3 += "<p> <strong> Imagens: </strong> </p>"
            for (let l = 1; l < dados.getElementsByTagName("receita")[2].childNodes[7].childNodes.length; l += 2) {

                //alert(dados.getElementsByTagName("receita")[2].childNodes[7].childNodes[l].childNodes[0].nodeValue)

                receita3 += "<img src=\"/Imagens/" + dados.getElementsByTagName("receita")[2].childNodes[7].childNodes[l].childNodes[0].nodeValue + "\" width=\"250\"> <br>"
            }
            document.getElementById("mostraReceitas").innerHTML = receita3
        })
    }
}

requisicao.open("GET", "receitas.xml", true)
requisicao.send()

}
onload = executar()

[wldomiciano]

Vc poderia mostrar o seu HTML e o receitas.xml?

[Wellington_Gomes1]

Enviei assim prq nao estava ficando organizado no browse
receitas.xml (2,2,KB)

[Wellington_Gomes1]

Donwtown Receitas - Início

<header id="cabecalho">
    <div>
        <hgroup>
            <h1> Donwtown Burguers </h1>
        </hgroup>
    </div>
</header>

<nav>
    <a href="index.html" class="active"> Início </a>
    <a href="receitas.html"> Receitas </a>
</nav>
<div id="tex_galeria"><h2>Galeria</h2></div>
     
<div id="galeria">  
    <aside class="linha1"> </aside> 
            <img src="donte.png">
            <img src="buf.png" >
            <img src="conbo.png">
            <img src="duplo.png">
            <img src="crep.png" >
            <img src="los.png" >
            <img src="veg.png" >
            <img src="join.png">            
        </div>


<footer>          
        <div class="hora">
            <h2>Horário de funcionamento</h2>
            <p>seg:	Fechado<br>
                ter:	18:00 – 23:30<br>
                qua:	18:00 – 23:30<br>
                qui:	18:00 – 23:30<br>
                sex:	18:00 – 00:00<br>
                sáb:	18:00 – 00:00<br>
                dom:	18:00 – 23:30<br>
            </p>
        </div>
        <div class="endereço">
            <h2>Endereço<br></h2>
            Quadra 102 Sul, Avenida NS 02, Lote 02, s/n - Sala 02<br>
            Plano Diretor Sul<br>
            Palmas - TO<br>
            77020-008<br>
            Brasil</p>
            &copy; Donwtown Burgers 2019
        </div>

            
        <ul class="icones-sociais">
                <header>
                        <h1>Acesse nossas redes sociais</h1>
                    </header>
            <a href="https://www.facebook.com/dtburgers/?epa=SEARCH_BOX">
                <img class="facebook" src="Imagens/logoFacebook.png" width="20" alt="Logomarca do Facebook">
            </a>

            <a href="https://www.instagram.com/dtburgers/">
                <img class="instagram" src="Imagens/logoInstagram.png" width="50" alt="Logomarca do Instagram">
            </a>

        </ul>
     
        </div>
       <small>Wellington Gomes</small>
    </footer> 

[Wellington_Gomes1]

Desculpe a demora

[wldomiciano]

Há varias formas de se fazer, eis a minha solução:

function mostrar(receita) {
  const display = document.getElementById('display');
  const conteudo = [];
  const nome = receita.getElementsByTagName('nome')[0].innerHTML;
  const ingredientes = receita.getElementsByTagName('ingredientes')[0].children;
  const passos = receita.getElementsByTagName('modoPreparo')[0].children;
  const imagens = receita.getElementsByTagName('ilustracao')[0].children;

  conteudo.push('<h1>' + nome + '</h1>');

  for (let i = 0; i < imagens.length; i++) conteudo.push('<img height="50" src="' + imagens[i].innerHTML + '">');

  conteudo.push('<h2>Ingredientes</h2>');
  conteudo.push('<ul>');
  for (let i = 0; i < ingredientes.length; i++) conteudo.push('<li>' + ingredientes[i].innerHTML + '</li>');
  conteudo.push('</ul>');

  conteudo.push('<h2>Modo de preparo</h2>');
  conteudo.push('<ol>');
  for (let i = 0; i < passos.length; i++) conteudo.push('<li>' + passos[i].innerHTML + '</li>');
  conteudo.push('</ol>');

  display.innerHTML = conteudo.join('\n');
}

function executar() {
  let requisicao = new XMLHttpRequest();

  requisicao.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      const dados = this.responseXML;
      console.log(this)
      console.log(this.responseXML)
      const receitas = dados.getElementsByTagName('receitas')[0].children;
      const botoes = document.getElementById('botoes');
      const conteudo = [];

      document.onclick = function(event) {
        if (event.target.classList.contains('mostrarReceita')) mostrar(receitas[event.target.dataset.id]);
      };

      const nomes = dados.getElementsByTagName('nome');
      for (let i = 0; i < nomes.length; i++) {
        conteudo.push('<button class="mostrarReceita" data-id="' + i + '">' + nomes[i].innerHTML + '</button>');
      }

      botoes.innerHTML = conteudo.join('\n');
    }
  };

  requisicao.open('GET', 'https://gistcdn.githack.com/wldomiciano/31d5bf0d15aa7027bc007810aec5b165/raw/5158da822d8b612d51cd35bb25ece10b533b42db/receitas.xml', true);
  requisicao.send();
}

onload = executar();

No seu HTML tem que ter 2 elementos com os ids corretos:

<div id="botoes"></div>
<div id="display"></div>

Aqui está uma versão funcional:

https://codepen.io/wldomiciano/pen/eYOaPbJ?editors=1010

No código que mostrei, eu separei a parte que carrega o XML e cria os botões da parte que mostra as receitas.

Acredito que há 2 partes que precisam de explicação.

Primeiro essa:

conteudo.push('<button class="mostrarReceita" data-id="' + i + '">' + nomes[i].innerHTML + '</button>');

No trecho acima estou criando os botões com o atributo data-id. Os atributos data são um recurso do HTML 5, basicamente vc pode criar o atributo que quiser desde que seja prefixado com data-, aqui, no caso, usei id.

A segunda parte é esta:

document.onclick = function(event) {
    if (event.target.classList.contains('mostrarReceita')) mostrar(receitas[event.target.dataset.id]);
};

Para acessar o atributo que criamos, fazemos assim element.dataset.id. Se tivessemos um atributo chamado data-umatributoqualquer, o acessariamos assim element.dataset.umatributoqualquer.

No trecho acima, nosso elemento é o event.target.

Como vc pode ver, o evento de click está sendo adcionado ao documento e não aos botões. Fiz assim porque nas minhas pesquisas descobri que não dá pra colocar eventos em elementos criados dinamicamente.

A solução foi colocar o evento no documento e filtrar de alguma forma, é por isso que tem aquele if, ele evita que o evento seja disparado se vc clicar em qualquer outra parte do documento exceto quando se clica diretamente nos botoes.

[Wellington_Gomes1]

valeu mestre deu certo aq! Vc e foda!