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

Question

I want to do a function if(if) next to a function multiplication, so that if the "model" is chosen 2(For noooossa joy), and the amount the customer wants is only 1, then in the box "Total Price" will have the value of this purchase. The value of only one outfit of this(For noooossa joy) will be R $ 15,00. Down with what I’ve done:

	<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>

Answer 1

you can use the "input" event in the inputs and/or the "change" in the selects to monitor which you want to change value in them, then you can calculate the item value.

/* 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 used the datalist in place at select, not to make Html Markup too extensive, this may help you if you want to inspect page elements.

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