Дублирование результата в div
Здравствуйте. Есть очень длинный калькулятор, построенный в виде сметы. В конце сметы есть вывод результатов расчета в строке "Итого:". Результат в этой строке изменятся сразу же после ввода числа. Так как таблица вышла сильно длинная, то хочется сделать чтобы результат расчета дублировался и был привязан к правому нижнему углу экрана (предположительно в блоке 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>
|
Andreij45,
А где у вас обрабатываются вводимые данные и размещается результат в output? Туда же добавьте и размещение результата в ваш div |
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>
|
| Часовой пояс GMT +3, время: 15:53. |