Я пытаюсь создать калькулятор на основе формы для бизнес-уравнения, который вычисляет окупаемость затрат на рекламу.

Функция работает, тестировал через консоль в Chrome. Но это только когда я устанавливаю переменные в числа, я изо всех сил пытаюсь использовать данные из формы, чтобы решить эту проблему.

Я не знаю, подходит ли для этого использование формы. Часть, которую я не могу понять, - это привязка данных HTML-формы к переменным JS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title></title>
</head>
<body>
        <form id="main">
            <label for="rprice">Retail Price: </label>
            <input type="number" id="rprice"><br><br>
            <label for="cogoods">Cost of Goods: </label>
            <input type="number" id="cogoods"><br><br>        
        </form>
</body>
</html>

let retailPrice = document.getElementById("rprice")
let costOfGoods = document.getElementById("cogoods")
let difference = retailPrice - costOfGoods

    function calculate () {
        return (retailPrice / difference)
     };
0
kianelstub 4 Май 2021 в 01:48

2 ответа

Лучший ответ

Принимать во внимание:

  1. чтобы получить значение любого входного атрибута использования .value
function calculate (){
    let difference = retailPrice.value - costOfGoods.value
    return retailPrice.value / difference 
 };

Добавьте вход submit, чтобы активировать функцию calculate()

<input type="submit" value="calculate">
  1. чтобы получить возвращаемое значение из функции, вы должны ее вызвать.
let form = document.getElementById("main");
form.addEventListener("submit",function(event){
    event.preventDefault();
    console.log(calculate());
});

Примечание: event.preventDefault() предотвращает перезагрузку формы.

let retailPrice = document.getElementById("rprice");
let costOfGoods = document.getElementById("cogoods");
let form = document.getElementById("main");
form.addEventListener("submit",function(event){
    event.preventDefault();
    console.log(calculate());
    document.getElementById("display").innerHTML = calculate();
});
function calculate (){
    let difference = retailPrice.value - costOfGoods.value
    return retailPrice.value / difference 
 };
<form id="main">
    <label for="rprice">Retail Price: </label>
    <input type="number" id="rprice" ><br><br>
    <label for="cogoods">Cost of Goods: </label>
    <input type="number" id="cogoods" ><br><br>        
    <input type="submit" value="calculate">
</form>
<div id="display"></div>
1
Steverst1 4 Май 2021 в 00:17

Просто переместите переменные внутрь функции. В настоящее время они устанавливаются при загрузке, вы хотите обновить эти переменные при запуске функции:

    function calculate () {
    let retailPrice = document.getElementById("rprice")
    let costOfGoods = document.getElementById("cogoods")
    let difference = retailPrice - costOfGoods
        return (retailPrice / difference)
     };

Очевидно добавить нулевые проверки и т. д.

-1
Quarter 3 Май 2021 в 23:07