Форум

Andreij45 · #1 (**permalink**) 23.04.2016, 17:48

Здравствуйте. Есть очень длинный калькулятор, построенный в виде сметы. В конце сметы есть вывод результатов расчета в строке "Итого:". Результат в этой строке изменятся сразу же после ввода числа. Так как таблица вышла сильно длинная, то хочется сделать чтобы результат расчета дублировался и был привязан к правому нижнему углу экрана (предположительно в блоке div). Буду благодарен за любую помощь.

<td class="sum">
<output name="result">0</output>
</td>

Получилось не совсем то что нужно. Результат дублируется при нажатии на кнопку "Расчет". Не подскажите что нужно сделать, чтобы результат изменялся сразу же как только ввели какое-то число.

<button onclick="myFunction()">Расчет</button>
<div id="copy-result"></div>
<script>
function myFunction() {
    var x = document.getElementsByName("result")[0].value;
    document.getElementById("copy-result").innerHTML = x;
}
</script>

Dilettante_Pro · #2 (**permalink**) 25.04.2016, 12:18

Andreij45,
А где у вас обрабатываются вводимые данные и размещается результат в output? Туда же добавьте и размещение результата в ваш div

Dilettante_Pro · #3 (**permalink**) 26.04.2016, 18:02

Andreij45,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Page</title>
</head>
<style>
    .fx
    {   position: fixed;
        border:1px solid black;
        width:50px;
    }
</style>
<script>
    window.addEventListener("DOMContentLoaded", setFixPosition);
    window.addEventListener("resize", setFixPosition); 
    function setFixPosition() {
        var elem = document.querySelector(".fx"),
            html = document.documentElement;
        elem.style.left = html.clientWidth - 52 + "px";
        elem.style.top = html.clientHeight - 20 + "px";
    };
    document.addEventListener("DOMContentLoaded", function () {
        var inps = document.querySelectorAll("input");

        for (var i = 0; i < inps.length; i++) {
            inps[i].oninput = function () {
                var sum = 0;
                for (var j = 0; j < inps.length; j++) { sum += +inps[j].value; }
                document.querySelector("output").innerText = sum;
                document.querySelector(".fx").innerText = sum;
            };
        };
    });
</script>
<body>
    <form>
    <table>
    <tr><td>Параметр 1</td><td><input type="text" value="0"/></td></tr>
    <tr><td>Параметр 2</td><td><input type="text" value="0"/></td></tr>
    <tr><td>Параметр 3</td><td><input type="text" value="0"/></td></tr>
    <tr><td>Параметр 4</td><td><input type="text" value="0"/></td></tr>
    <tr><td>Параметр 5</td><td><input type="text" value="0"/></td></tr>
    <tr><td>Параметр 6</td><td><input type="text" value="0"/></td></tr>
    <tr><td>Параметр 7</td><td><input type="text" value="0"/></td></tr>
    <tr><td>Параметр 8</td><td><input type="text" value="0"/></td></tr>
    <tr><td>Параметр 9</td><td><input type="text" value="0"/></td></tr>
    <tr><td>Результат</td><td><output name="result"></output ></td></tr>
    </table>
    </form>
        <div class="fx">0
        </div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript