I want to do a function if (if) next to a multifunction function

Navigation
0

I want to make a function if (if) with a multiplication function, so that if you choose the "modeloescolha" 2 (For noooossa joy), and the amount that the customer wants is only one, then in the " Total Price "will have the value of this purchase. The value of only one clothing of this (For noooossa joy) will be $ 15.00. Here's what I've done below: 

	<fieldset id="pedido"><legend>Quero uma Camiseta Feminina</legend>
		<p><label for="cMod">Modelo:</label>
<select name="modeloescolha"> 
   	<option value="1">
   	<option value="2">Para noooossa alegria 
   	<option value="3">Caveira de óculos pink
   	<option value="4">Não toque no meu cabelo
	<option value="5">Bacon estilo de vida
	<option value="6">Hakuna Matata do Timão e Pumba
	<option value="7">Princesa Peach
</select></p>
		<p><label for="cCor">Cor:</label>
<select name="utilização"> 
   	<option value="1">
   	<option value="2">Azul 
   	<option value="3">Vermelho
   	<option value="4">Branco
</select></p>
		<p><label for="cQtd">Quantidade:</label>
		<input type="number" name="tNum" id="cNum" min="1" max="99999"</p>
		<p><label for="cTot">Preço Total: R$</label></p>
	</fieldset>
    
asked by anonymous 04.04.2016 / 14:42

1 answer

1

You can use the "input" event in the inputs and / or the "change" in the selects to monitor any change in value in them, so you can calculate the value of the item. 

/* definindo a "classe" Produto */
var Produto = function (elem) {
  var self = this;
  this.inputs = {};
  
  /* buscando os objetos DOM na linha atual */
  this.inputs.modeloescolha = elem.querySelector("[name='modeloescolha']");
  this.inputs.cores = elem.querySelector("[name='cores']");;
  this.inputs.quantidade = elem.querySelector("[name='quantidade']");;
  this.inputs.valor = elem.querySelector("[name='valor']");;

  /* definindo os valores iniciais */
  this.modeloescolha = 0;
  this.cores = 0;
  this.quantidade = 0;
  
  this.ModeloId = 0;
  this.CorId = 0;

  var onInput = function (event) {
    self.onInput(event);  
  }

  this.inputs.modeloescolha.addEventListener("input", onInput);
  this.inputs.cores.addEventListener("input", onInput);
  this.inputs.quantidade.addEventListener("input", onInput);

  /* atualizando spans com valores */
  this.atualizarValor();
}

/* criando uma propriedade calculada para a "classe" Produto. */
Object.defineProperty(Produto.prototype, "total", {
  get: function () {
    return (this.modeloescolha + this.cores) * this.quantidade;
  }
});

/* atualizando valores ao modificar o campo value de um input */
Produto.prototype.onInput = function (event) {
  var modeloescolha = Produto.modeloescolha.querySelector("option[value='" + this.inputs.modeloescolha.value + "']");
  var cores = Produto.cores.querySelector("option[value='" + this.inputs.cores.value + "']");

  this.modeloescolha = modeloescolha ? parseFloat(modeloescolha.dataset.value) : 0;
  this.cores = cores ? parseFloat(cores.dataset.value) : 0;
  this.quantidade = this.inputs.quantidade.value ? parseFloat(this.inputs.quantidade.value) : 0;
  
  this.ModeloId = modeloescolha ? parseInt(modeloescolha.dataset.id) : 0;
  this.CorId = cores ? parseInt(cores.dataset.id) : 0;

  this.atualizarValor();
}

/* consultandos os objetos DOM iniciais/compatilhados. */
Produto.template = document.getElementById("tmplLinha").content;
Produto.modeloescolha = document.getElementById("modeloescolha");
Produto.cores = document.getElementById("cores");
Produto.addItem = document.getElementById("addItem");
Produto.total = document.getElementById("total");
Produto.tabela = document.querySelector("#produtos tbody");
Produto.lista = [];

/* definindo o "método" atualizarValor para a "classe" Produto */
Produto.prototype.atualizarValor = function () {
  var total = 0
  Produto.lista.forEach(function (produto, indice) {
    total += produto.total;
  });

  this.inputs.valor.textContent = this.total.toLocaleString("pt-BR", { 
    style: "currency",
    currency: "BRL"
  });

  Produto.total.textContent = total.toLocaleString("pt-BR", { 
    style: "currency",
    currency: "BRL"
  });
}

Produto.addItem.addEventListener("click", function () {
  var item = document.importNode(Produto.template, true);
  var produto = new Produto(item);
  Produto.lista.push(produto);
  Produto.tabela.appendChild(item);
});
<table id="produtos">
  <thead>
    <tr>
      <th>Modelo</th>
      <th>Cor</th>
      <th>Quantidade</th>
      <th>Valor</th>
    </tr>
  </thead>
  <tbody>
    
  </tbody>
  <tfoot>
    <tr>
      <td><button id="addItem">Adicionar Item</button></td>
      <td colspan="2">Total:</td>
      <td><span id="total"></span></td>
    </tr>
  </tfoot>
</table>

<template id="tmplLinha">
  <tr>
    <td><input type="text" name="modeloescolha" list="modeloescolha" /></td>
    <td><input type="text" name="cores" list="cores" /></td>
    <td><input type="number" name="quantidade" min="1" max="99999" /></td>
    <td><span name="valor"></span></td>
  </tr>
</template>

<datalist id="modeloescolha"> 
  <option data-id="2" data-value="15.00" value="Para noooossa alegria"></option>
  <option data-id="3" data-value="1.00" value="Caveira de óculos pink"></option>
  <option data-id="4" data-value="2.00" value="Não toque no meu cabelo"></option>
  <option data-id="5" data-value="3.00" value="Bacon estilo de vida"></option>
  <option data-id="6" data-value="4.00" value="Hakuna Matata do Timão e Pumba"></option>
  <option data-id="7" data-value="5.00" value="Princesa Peach"></option>
</datalist>

<datalist id="cores"> 
  <option data-id="2" data-value="1.00" value="Azul"></option>
  <option data-id="3" data-value="1.00" value="Vermelho"></option>
  <option data-id="4" data-value="0.00" value="Branco"></option>
</datalist>

I've used datalist instead of select , so as not to make HTMl markup too long, this might help if you want to inspect the elements of the page.

If you prefer to use a select instead, you can do it without any problem.

    
04.04.2016 / 15:40
Route to Home Page Angular Screenshot Function on android