Как сделать чтобы значения передавались

Question

Есть калькулятор в котором из ползунков (инпутов) должно передаваться значение с помощью js, а потом по формуле считаться. Но у меня где-то в инпута и в скрипте косяк и этого сделать не получается. Помогите пожалуйста. Вот код

let percent = document.getElementById("percent");
percent.innerHTML = percent.value;

percent.oninput = function(){
    percent.innerHTML = this.value;
}

let start = document.getElementById("start");
start.innerHTML = start.value;

start.oninput = function(){
    start.innerHTML = this.value;
}

let days = document.getElementById("days");
// output3.innerHTML = days.value;

days.oninput = function(){
    days.innerHTML = this.value;
}

let calc = function(){
    let percent = document.querySelector('#percent').value
    console.log(percent)
    let start = document.querySelector('#start').value;
    let days = document.querySelector('#days').value;
    try{
        percent = Number(percent);
        start = Number(start);
        days = Number(days);
        let new1 = (percent / 100) + 1
        let powerIs = (Math.pow(new1, days))
        let earning = (powerIs * start).toFixed(2)
        let income = (earning - start).toFixed(2)
        document.getElementById("deposit").innerHTML = earning;
        document.getElementById("income").innerHTML = income;
    }catch(e){}
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
        <link rel="stylesheet" href="./main.css">
        <title>Calculator</title>
    </head>
    <body>
        <div id="text-has-centred">
            <img class="logo" src="img/logo.png" alt="TRADE CAPITAL">
            <div class="column text-has-centered" style="background-color: #000000;">
                <span class="is-white-bold">КАЛЬКУЛЯТОР СЛОЖНОГО ПРОЦЕНТА ДОХОДНОСТИ РОБОТА</span>
            </div>
        </div>
        <div class="columns is-mobile" style="background-color: #f6c042;">
            <div class="column"><span class="is-white-bold">ЕЖЕДНЕВНЫЙ %</span></div>
            <div class="column"><span class="is-white-bold">НАЧАЛЬНЫЙ ДЕПОЗИТ</span></div>
            <div class="column"><span class="is-white-bold">КОЛИЧЕСТВО ДНЕЙ</span></div>
        </div>
        <div class="columns is-mobile" style="background-color: #bfbfbf;">
            <div class="column"><input type="range" id="percent" onkeyup="calc()" value="0.5" min="0" max="1" class="slider" list="rangeList1" Step="0.1">
                <datalist id="rangeList1">
                    <option value="0" label="0"></option>
                    <option value="0.1" label="0.1"></option>
                    <option value="0.2" label="0.2"></option>
                    <option value="0.3" label="0.3"></option>
                    <option value="0.4" label="0.4"></option>
                    <option value="0.5" label="0.5"></option>
                    <option value="0.6" label="0.6"></option>
                    <option value="0.7" label="0.7"></option>
                    <option value="0.8" label="0.8"></option>
                    <option value="0.9" label="0.9"></option>
                    <option value="1" label="1"></option>
                </datalist>
                <p>Значение: <span id="percent"></span></p>
            </div>
            
            <div class="column">
                <input type="range" id="start" onkeyup="calc()" min="300" max="5000" value="1500" class="slider" Step="10">
                <p>Значение: <span id="start"></span></p>
            </div>
            
            <div class="column"><input type="range" id="days" onkeyup="calc()" min="1" max="365" value="30" class="slider">
                <p>Значение: <span id="days"></span></p>
            </div>
        </div>
        <div class="columns" style="background-color: #ff5758;">
            <div class="column is-two-thirds"><span class="is-white-bold">ВАШ ДЕПОЗИТ:</span></div>
            <div class="column">
                <div id="deposit" onkeyup="calc()">
                </div>
            </div>
        </div>
        <div class="columns" style="background-color: #00b050;">
            <div class="column    is-two-thirds"><span class="is-white-bold">ВАША ПРИБЫЛЬ:</span></div>
            <div class="column">
                <div id="income" onkeyup="calc()"></div>
            </div>
        </div>
        <div class="columns" style="background-color: black;">
            <div class="column">
                <span class="is-white-bold is-big"><a class="is-white-bold is-big"
                href="https://vk.com/app5898182_-193785733#s=731691" target="blank">УЗНАТЬ ПОДРОБНОСТИ</a> </span>
            </div>
        </div>
    </body>
</html>

БЛОГ НА HUSL

Как сделать чтобы значения передавались

Ответы (0 шт):