Почему мои уравнения не выполняются в этой функции?

#javascript

Вопрос:

Я путешествую со следующей функцией, поэтому, когда значение tipoCompra = = «Национальный», costUSD будет просто значением costUSD и отключит другие поля, но если значение tipoCompra = = «Внешний», значение costUSD будет автоматически заполнено простыми уравнениями в других полях ввода.

 function CalcularNacionalizacion(){

        var tipoCompra = document.getElementById('tipoCompra').value;
        var fob = document.getElementById('fob');
        var nacFactor = document.getElementById('nacFactor');
        var Nacionalizacion = document.getElementById('costNacionalizacion');
        

        
        

        
        if (tipoCompra == 'Nacional'){
                    fob.disabled = true;
                    nacFactor.disabled = true;
                    Nacionalizacion.disabled = true;
                    var totalUSD = document.getElemenById('costUSD').value;

                } else {
                    fob.disabled = '';
                    nacFactor.disabled = '';
                    Nacionalizacion.disabled = '';
                    var fob = document.getElementById('fob').value;
                    var nacFactor = document.getElementById('nacFactor').value;
                    var Nacionalizacion = parseFloat(fob) * parseFloat(nacFactor);        
                    document.getElementById('costNacionalizacion').value = Nacionalizacion;

                    var totalUSD = parseFloat(fob)   parseFloat(Nacionalizacion);
                    document.getElementById('costUSD').value = totalUSD;
                }   
        
    } 
 <div class="form-group col-md-2">
                            <label for="">Tipo de Compra</label>
                            <select name="" id="tipoCompra"  onchange="CalcularNacionalizacion();"  class="form-control" required>
                            <option value="">Tipo de compra </option>
                            <option value="Nacional">Nacional</option>
                            <option value="Exterior">Exterior</option>
                            
                            
                            </select>
                        </div>
<div class="form-group col-md-2">
                        <label for="fob">Costo Fob</label>
                        <input type="number"   step="00.01" id="fob" name="fob" class="form-control" disabled="true" onchange="CalcularNacionalizacion();" onkeyup="CalcularNacionalizacion();" required>
                    </div>

                    

                    <div class="form-group col-md-2">
                        <label for="nacFactor">Factor de Nacionalizacion</label>
                        <input type="number"   step="00.01" id="nacFactor" name="nacFactor" class="form-control" onchange="CalcularNacionalizacion();" onkeyup="CalcularNacionalizacion();"  required>
                    </div>
                    
                    <div class="form-group col-md-2">
                        <label for="costNacionalizacion">Costo Nacionalizacion</label>
                        <input type="number"   step="00.01" id="costNacionalizacion" name="costNacionalizacion" onchange="CalcularNacionalizacion();" onkeyup="CalcularNacionalizacion();"  class="form-control" required>
                    </div>
<div class="form-group col-md-2">
                        <label for="costUSD">Costo total en USD-O</label>
                        <input type="number"   step="00.01" name="costUSD" class="form-control" id="costUSD" onchange="ToCalcularNacionalizaciondas();" onkeyup="CalcularNacionalizacion();"  required>
                    </div> 

Если вы выберете опцию «Внешний вид», вы увидите, что мои уравнения не выполняются.

Комментарии:

1. Опечатка nacFacotr .

Ответ №1:

Я делаю некоторый рефакторинг в вашем коде, чтобы он работал

 const tipoCompra = document.querySelector('#tipoCompra');
const fob = document.querySelector('#fob');
const nacFactor = document.querySelector('#nacFactor');
const Nacionalizacion = document.querySelector('#costNacionalizacion');
const costUSD = document.querySelector('#costUSD');

const elements = [tipoCompra, fob, nacFactor, Nacionalizacion, costUSD];

elements.forEach((i) => {
  i.addEventListener('change', CalcularNacionalizacion);
});

function CalcularNacionalizacion(e) {
  if (tipoCompra.value === 'Nacional') {
    fob.disabled = true;
    nacFactor.disabled = true;
    Nacionalizacion.disabled = true;
    costUSD.value = costUSD.value;
  } else {
    fob.disabled = false;
    nacFactor.disabled = false;
    Nacionalizacion.disabled = false;
    const fobValue = Number(fob.value);
    const nacFacotrValue = Number(nacFactor.value);
    const NacionalizacionValue = fobValue * nacFacotrValue;
    Nacionalizacion.value = NacionalizacionValue;
    const totalUSDValue = fobValue   NacionalizacionValue;
    costUSD.value = totalUSDValue;
  }
} 
 <div class="form-group col-md-2">
  <label for="">Tipo de Compra</label>
  <select name="" id="tipoCompra" class="form-control" required>
    <option value="">Tipo de compra </option>
    <option value="Nacional">Nacional</option>
    <option value="Exterior">Exterior</option>
  </select>
</div>
<div class="form-group col-md-2">
  <label for="fob">Costo Fob</label>
  <input type="number" step="00.01" id="fob" name="fob" class="form-control" disabled="true" required />
</div>

<div class="form-group col-md-2">
  <label for="nacFactor">Factor de Nacionalizacion</label>
  <input type="number" step="00.01" id="nacFactor" name="nacFactor" class="form-control" required />
</div>

<div class="form-group col-md-2">
  <label for="costNacionalizacion">Costo Nacionalizacion</label>
  <input type="number" step="00.01" id="costNacionalizacion" name="costNacionalizacion" class="form-control" required />
</div>
<div class="form-group col-md-2">
  <label for="costUSD">Costo total en USD-O</label>
  <input type="number" step="00.01" name="costUSD" class="form-control" id="costUSD" required />
</div>