Как использовать DOM с ссылками .value в разных областях?(рефакторинг / проблема объема) - PullRequest
Новая
       28

Как использовать DOM с ссылками .value в разных областях?(рефакторинг / проблема объема)

0 голосов
/ 25 ноября 2018

Спасибо, что заглянули!У меня есть фрагмент рабочего кода здесь, в JSFiddle

Это базовый вид калькулятора, который принимает 4 значения, запускает их через функцию и выплевывает результат.Он работает, как и ожидалось, пока я не попытаюсь изменить код.Как только я пытаюсь изменить его, по крайней мере, this , что дает мне NaN или 0, что бы я ни делал.

Вот сам исходный код 

<!DOCTYPE html>
<html>
<body>

Посмотрите, насколько богатым вы можете стать, просто переворачивая вещи 

<input type="number" id="bp" placeholder="Buying price">
<input type="number" id="n" placeholder="Amount">
<input type="number" id="sp" placeholder="Selling price">
<input type="number" id="t" placeholder="Tax % (1 by def, 3 prem)">
<button id="button" onclick="profit()">Get rich!</button>
<input type="text" id="r" placeholder="Profit (unless ganked)">
<button id="button" onclick="resetOnClick()">More!</button><br>


<p>Thank HumbleOldMan later, go get rich now.</p>


var profit = function(){    

  var bp = document.getElementById("bp").value;
  var n = document.getElementById("n").value;
  var sp = document.getElementById("sp").value;
  var t = document.getElementById("t").value;
    var result = Math.floor((sp*n-(sp*n/100)*t)-bp*n)
    console.log(result);
    document.getElementById("r").value = result;
}

var resetOnClick = function(){
  document.getElementById("t").value =
  document.getElementById("sp").value =
  document.getElementById("n").value =
  document.getElementById("bp").value = "";
  console.log("reset clicked");
}

// просто не удалось использовать назначенные переменные для ссылок DOM по причине.Должно быть, сфера bs или я просто нуб //

И вот что я пытался сделать 

<script type="text/javascript">
    var bp = Number(document.getElementById("bp").value);
    var n = Number(document.getElementById("n").value);
    var sp = Number(document.getElementById("sp").value);
    var t = Number(document.getElementById("t").value);
    var r = Number(document.getElementById("r").value);
    var result; 

    var calcProfit = function(bp,n,sp,t,r){ 
        var result = Math.floor((sp*n-(sp*n/100)*t)-bp*n)
        console.log(Number(result));
        r = Number(result);
    }

    var resetOnClick = function(){
      document.getElementById("t").value =
      document.getElementById("sp").value =
      document.getElementById("n").value =
      document.getElementById("bp").value = "";
      console.log("reset clicked");
    } 
  </script>

Вопрос общий.Что я делаю неправильно?Я определенно не хочу соглашаться на первую версию и привыкнуть делать такие вещи.Любая помощь будет высоко оценена.

1 Ответ

0 голосов
/ 25 ноября 2018

Вы должны получить значение полей ввода после нажатия кнопки, а не при загрузке страницы, что даст значение NaN, поскольку изначально все они пусты.Войдите в функцию calcProfit, чтобы получить обновленные значения.

...