Javascript function run on each element

Asked

Viewed 238 times

2

Friends good morning.

I have the following problem. I am developing a variable that contains a list of products.

var produtos = new Array()

produtos[produtos.length]="OUTROS|Catchup|1 sache|10"
produtos[produtos.length]="OUTROS|Mostarda|1 sache|15"
produtos[produtos.length]="OUTROS|Maionese|1 sache|40"
produtos[produtos.length]="OUTROS|Molho branco|1 colh sopa|30"
produtos[produtos.length]="OUTROS|Molho bolonhesa|1 colh sopa|30"
produtos[produtos.length]="OUTROS|Molho madeira|1 colh sopa|10"
produtos[produtos.length]="OUTROS|Molho agridoce|1 colh sopa|30"
produtos[produtos.length]="OUTROS|Molho rose|1 colh sopa|50"
produtos[produtos.length]="OUTROS|Catchup|1 sache|10"
produtos[produtos.length]="OUTROS|Pizza calabresa/frango catupiry e quatro queijos|1 fatia|400"
produtos[produtos.length]="OUTROS|Lasanha|2 colh sopa|160"
produtos[produtos.length]="OUTROS|Cachorro quente|1 unid|420"
produtos[produtos.length]="OUTROS|Misto quente|1 unid|235"
produtos[produtos.length]="OUTROS|Cheese burguer|1 unid|300"

produtos.sort();

function lstprodutos(){
  var nomeprd="";
  var recallprd="";
  for (x=0;x<produtos.length;x++){
    subprod=produtos[x].split('|');
    if (recallprd!=subprod[0]){
      nomeprd+='<div class="listprod"><a href="javascript:escolha(\''+subprod[0]+'\')">'+subprod[0]+'</a></div>';
      recallprd=subprod[0];
    }
  }
  document.getElementById('produtos').innerHTML=nomeprd;
  document.getElementById('totalcal').innerHTML=0;
}

function escolha(item){
  var escolhido='';
  for (x=0;x<produtos.length;x++){
    subprod=produtos[x].split('|');
    if (item==subprod[0]){
      escolhido+='<div class="linha"><div class="item1"><a href="javascript:prato('+x+',\'null\')">'+subprod[1]+'</a></div><div class="item2"><a href="javascript:prato('+x+',\'null\')">'+subprod[2]+'</a></div><div class="item3"><a href="javascript:prato('+x+',\'null\')">'+subprod[3]+'</a></div></div>';
    }
  }
  this.document.getElementById('select').innerHTML=escolhido;
}

var item=new Array;

function prato(num,retira){
  var pratofeito="";
  var valocal=0;
  if (!isNaN(num)){
    elem = produtos[num];
    item.push(elem);
  }
  if (!isNaN(retira)){
    item.splice(retira,1)
  }
  for (i=0;i<item.length;i++){
    substring=String(item[i]);
    sub=substring.split('|');
    pratofeito+='<div class="item4"><a href="javascript:prato(\'null\','+i+')" title="Clique para remover">'+sub[1]+', '+sub[2]+'</a></div>';
    valocal=valocal+parseInt(sub[3]);
  }
  document.getElementById('escolha').innerHTML=pratofeito;
  document.getElementById('totalcal').innerHTML=valocal;
}

In this js, it takes the category of products, when I click it opens the list of products, when clicking it loads the value of each product on top, as if I were selecting the products of a meal.

That works according to the code below:

<div class="inputs_iden2">
  <label class="txt_input">
    <i class="fa fa-cutlery"></i>
    Lanche
  </label>
  <br>
  <div id="escolha"></div>
  <br>
  <div class="sel" id="sel" id="lanche">
    <div class='txt'>ESCOLHA UM GRUPO DE ALIMENTOS</div>
    <div class="options hide">
      <div>
        <a href="javascript:escolha('CEREAIS')">CEREAIS</a>
      </div>
      <div>
        <a href="javascript:escolha('HORTALICAS')">HORTALIÇAS</a>
      </div>
      <div>
        <a href="javascript:escolha('LEGUMINOSAS')">LEGUMINOSAS</a>
      </div>
      <div>
        <a href="javascript:escolha('FRUTAS')">FRUTAS</a>
      </div>
      <div>
        <a href="javascript:escolha('LEITE E DERIVADOS')">LEITE E DERIVADOS</a>
      </div>
      <div>
        <a href="javascript:escolha('CARNE E OVOS')">CARNE E OVOS</a>
      </div>
      <div>
        <a href="javascript:escolha('OLEOS E GORDURAS')">OLEOS E GORDURAS</a>
      </div>
      <div>
        <a href="javascript:escolha('DOCES')">DOCES</a>
      </div>
      <div>
        <a href="javascript:escolha('BEBIDAS')">BEBIDAS</a>
      </div>
      <div>
        <a href="javascript:escolha('OUTROS')">OUTROS</a>
      </div>
    </div>
  </div>
  <div class="container clearfix">
    <div id="HOTWordsTxt" style="display:block;clear:both;">
      <div class="divider">
        <div class="corpo">
          <div align="left">
            <p class="tit_list_ali" id="txt_H">Escolha um alimento</p>
            <div class="linha" id="linha">
              <div class="item1"><b>Alimento</b></div>
              <div class="item2"><b>Quantidade</b></div>
              <div class="item3"><b>Calorias</b></div>
            </div>
            <div id="select"></div> 
            <button class="btn_concluido" id="concluido">CONCLUIDO</button>
          </div>    
        </div>
      </div>
    </div>
  </div>
</div>

But I need to do this for 10 meals so that the user can choose the foods for each meal.

I’ve already made select work to select the category list of products, so that it works only click on the element you are manipulating, but when I click on the bottom div I can choose the category of product it only loads in the first div. never load the product into the select div I’m handling.

I know Jquery has this function.

javascript

  • friend, for example breakfast, goes the code, snack goes the code for him to choose the food, but if I click on the select of the food group opens each in his should meal, but if I click to choose the product he only load in the first div, On Monday I can select, but it only loads the list on the first div. Here’s a link to see how you can better understand. http://www.beltnutrition.com.br/blog/dieta/index.html

  • @jeannsebold do not understand what this site does.

  • @He calculates the caloric expenditure, in the calorie intake calculation part, I do the food launches, then we have 7 meals. In it we should launch the foods consumed click on the "Choose a Food Group" when clicking it selects the food group you want, well selected the foods of the breakfast, we go to the food of the snack, when I click on the select "Choose a Food Group" from the snack, it opens and if I select the food group it carries the group for breakfast, I want each food to be loaded in each meal group.

  • I was able to identify your problem.

1 answer

2


First of all, this is happening because you have declared several attributes id with the same value, this is highly not recommended, is a bad practice and will cause many future problems.

To solve this, one of the alternatives is:

In each call, example, javascript:escolha('CEREAIS') you will pass an additional parameter indicating an identifier of the current group, for example: javascript:escolha('CEREAIS', 1).

It will also change the elements <div> with id="escolha" for id="escolha1", remembering that 1 is an identifier for your group.

In function escolha(); you will make the following change:

function escolha(item, idGrupo){
  {...}
  escolhido+='<div class="linha"><div class="item1"><a href="javascript:prato('+x+',\'null\', '+idGrupo+')">'+subprod[1]+'</a></div><div class="item2"><a href="javascript:prato('+x+',\'null\', '+idGrupo+')">'+subprod[2]+'</a></div><div class="item3"><a href="javascript:prato('+x+',\'null\', '+idGrupo+')">'+subprod[3]+'</a></div></div>';
  {...}
  this.document.getElementById('select').innerHTML=escolhido;
}

So you will declare to the dish function the identifier of the group to which it belongs.

In the dish function is almost the same thing, you will make these changes:

function prato(num,retira,idGrupo){
  {...}
  document.getElementById('escolha'+idGrupo).innerHTML=pratofeito;
  document.getElementById('totalcal').innerHTML=valocal;
}

When the dish function is called, when the innerHTML, the element that will receive the pratofeito will be the with id="escolha1"

A final observation is that this form is not the most recommended, there are better ways to do this, much more performatic, consistent and modular. I believe that many things in your code can be improved, so if you need any help we’ll be here.

  • Vlw Desvaga. It all worked blz, only when selecting the foods of each meal it gives a bug. When I add the elements at breakfast, it adds quiet, more when I go to the snack and add another food it adds the breakfast food plus the selected food at the snack.

  • @jeannsebold I am analyzing...

  • @jeannsebold go for a chat so I can help you better, http://chat.stackexchange.com/rooms/32118/devgaspa-ajuda-voce

  • blz guy.. I’m going to go there, plus I year can type anything

  • face can’t talk to you can’t type message

  • Dude, if you have Skype, we can talk over there, I think it’s easier

  • @jeannsebold you needed 20 or more reputation to be able to type in the chat, now give, if you still can not, I will inform my skype for you in chat.

Show 2 more comments

Browser other questions tagged javascript

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