Вход

Просмотр полной версии : Добавление новой строки с новыми значениями

maplol123@gmail.com
30.10.2019, 23:27
Здравствуйте, как сделать так, чтобы при значениях С1, С2, С3, в textarea, при нажатии кнопки, добавлялось одна строка с какими-то значениям. При последующих нажатиях, после предыдущей строки, добавлялись еще строки с другими значениями? В js - переменная b.
function setFocus(){
document.getElementById("c1").focus();
}
var con1,con2,con3,posled,paral;
function vse() {
con1 = document.getElementById('c1').value;
con2 = document.getElementById('c2').value;
con3 = document.getElementById('c3').value;
con1 = parseFloat(con1);
con2 = parseFloat(con2);
con3 = parseFloat(con3);
posled = Math.abs(1/(1/con1)+(1/con2)+(1/con3)).toFixed(2) ;
paral = Math.abs(con1+con2+con3);
document.getElementById('outposl').innerHTML = posled;
document.getElementById('outparal').innerHTML = paral;
if(!con1){
alert('не все данные введены!');
}
else if(!con2){
alert('не все данные введены!');
}
else if(!con3){
alert('не все данные введены!');
}

var b='при значениях ' + con1 + '' + ' ' + con2 + '' + ' ' + con3 + '\r\n';
document.getElementById('buf').innerHTML = b;
}

function clearButton() {
document.getElementById('c1').value = '';
document.getElementById('c2').value = '';
document.getElementById('c3').value = '';
document.getElementById("c1").focus();
};

function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="js.js"></script>
</head>
<body onload="setFocus()">
<main>
<div class="opis">Введите значения емкости трех конденсаторов и нажмите кнопку "Вычислить". Для отделения дробной части используйте точку.</div>
<img id="form" src="formuli.PNG" alt="forms">
<div class="obs">Ввод исходных данных</div>
<div>С1 (мкф)<input type="text" id="c1" value=""></div>
<div>С2 (мкф)<input type="text" id="c2" value=""></div>
<div>С3 (мкф)<input type="text" id="c3" value=""></div>
<button onclick="vse()">Вычислить</button>
<button onclick="clearButton()">Очистить</button>
<button onclick="toggle_visibility('form')">Формулы</button>
<div class="obs">Результаты вычислений</div>
<hr>
<div class="box">Емкость при последовательном соединении (мкф)= <div id="outposl">Результат</div></div>
<div class="box">Емкость при параллельном соединении (мкф)= <div id="outparal">Результат</div></div>
<textarea name="text" id="buf" rows="10" cols="50" ></textarea>
</main>

</body>
</html>
laimas
31.10.2019, 09:13
Math.abs зачем? И posled = (1/((1/con1)+(1/con2)+(1/con3))).toFixed(2). Ну и при параллельном соединении тоже тогда (con1+con2+con3).toFixed(2), коли предполагается ввод не только целых величин.

posled = Math.abs(1/(1/con1)+(1/con2)+(1/con3)).toFixed(2) ради того чтобы сделать единственное - document.getElementById('outposl').innerHTML = posled, это странно, а тем более странно объявлять эти переменные глобальными. Сначала:

document.getElementById('outposl').innerHTML = posled;
document.getElementById('outparal').innerHTML = paral;

а затем проверять корректность ввода, это нелогично, к тому же прописывать отдельно условия и действия для проверки каждого поля.

Тоже самое и здесь:

var b='при значениях ' + con1 + '' + ' ' + con2 + '' + ' ' + con3 + '\r\n';
document.getElementById('buf').innerHTML = b;

бесполезность в переменной b, а также в innerHTML так как textarea имеет свойство value, коим и нужно оперировать. И вообще, совсем непонятно назначение этого действия.

Зачем скрывать картинку не понятно, и в toggle_visibility() передавать ID, если она одна и можно сразу в функции обратиться к ней?

<main>
<div class="opis">Введите значения емкости трех конденсаторов и нажмите кнопку "Вычислить". Для отделения дробной части используйте точку.</div>
<img id="form" src="formuli.PNG" alt="forms"/>
<fieldset>
<legend>Ввод исходных данных</legend>
<label>С1 (мкф) <input type="text" id="c1"/></label>
<label>С2 (мкф) <input type="text" id="c2"/></label>
<label>С3 (мкф) <input type="text" id="c3"/></label>
</fieldset>
<fieldset>
<legend>Операции</legend>
<button onclick="calculate()">Вычислить</button>
<button onclick="clearButton()">Очистить</button>
<button onclick="toggleVisibility()">Формулы</button>
</fieldset>
<fieldset>
<legend>Результаты вычислений</legend>
<div class="box">Емкость при последовательном соединении (мкф) = <output id="series"></output></div>
<div class="box">Емкость при параллельном соединении (мкф) = <output id="parallel"></output></div>
<textarea name="text" id="buf" rows="10" cols="50" ></textarea>
</fieldset>
</main>

<script>
//если уж и объявлять глобально, то элементы, которыми в дальнейшем оперировать
var c1 = document.getElementById('c1'),
c2 = document.getElementById('c2'),
c3 = document.getElementById('c3'),
series = document.getElementById('series'),
parallel = document.getElementById('parallel'),
buff = document.getElementById('buf'),
exp = document.getElementById("form");

function calculate() {
//запятые можно и заменять
var v1 = parseFloat(c1.value.replace(',', '.')),
v2 = parseFloat(c2.value.replace(',', '.')),
v3 = parseFloat(c3.value.replace(',', '.'));

if(!v1 || !v2 || !v3) {
alert('не все данные введены!');
return;
}

series.value = (1/((1/v1) + (1/v2) + (1/v3))).toFixed(2);
parallel.value = (v1 + v2 + v3).toFixed(2);

buff.value += 'при значениях ' + v1 + '' + ' ' + v2 + '' + ' ' + v3 + '\n';
}

function clearButton() {
c1.value = '';
c2.value = '';
c3.value = '';
c1.focus();
}

function toggleVisibility() {
exp.hidden = !exp.hidden
}
</script>
maplol123@gmail.com
31.10.2019, 14:10
laimas,Спасибо огромное за помощь!! Недавно начал изучать js, как в универе начались лабораторные по численным методам, и я их решил делать на js, попутно вникая)