Форум

maplol123@gmail.com · #1 (**permalink**) 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 · #2 (**permalink**) 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 · #3 (**permalink**) 31.10.2019, 14:10

laimas,Спасибо огромное за помощь!! Недавно начал изучать js, как в универе начались лабораторные по численным методам, и я их решил делать на js, попутно вникая)

Форум

Справочник

Discord чат

Курсы javascript