Форум

Tybalt · #1 (**permalink**) 19.01.2015, 15:56

Значение переменной обнуляется при использовании скрипта в браузере. Помогите пожалуста доработать скрипт.

<! DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>РАСЧЕТ ПАРАМЕТРОВ БОЧКИ</title>
</head>

<body>
<form name="frm">
<input name = "H" size="20"><br>
<input name = "R" size="20"><br>
<input name = "A" size="20"><br>

<button onClick="raschet ()">Расчитать</button>
<button onClick="runclear ()">Очистить</button>
</form>

Объем равен = <strong name="dannie1" id="dannie1" style=" color:#FF0000">_</strong> кубических миллиметров.

<script type="text/javascript">
function raschet ()
{
var h=document.body.querySelector('input[name="H"]').value;
var r=document.body.querySelector('input[name="R"]').value;
var a=document.body.querySelector('input[name="A"]').value;
var rasch=(h*r*a);

document.getElementById("dannie1").innerHTML=rasch ;
}

function runclear ()
{
document.frm.H.value="";
document.frm.R.value="";
document.frm.A.value="";

document.getElementById("dannie1").innerHTML="_";
}
</script>
</body>
</html>

danik.js · #2 (**permalink**) 19.01.2015, 17:10

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>РАСЧЕТ ПАРАМЕТРОВ БОЧКИ</title>
</head>

<body>
<form id="form">
<input name = "H" size="20"><br>
<input name = "R" size="20"><br>
<input name = "A" size="20"><br>

<button type="submit">Расчитать</button>
<button type="reset">Очистить</button>
Объем равен = <input name="result" readonly style=" color:#FF0000" size="1" value="_" /> кубических миллиметров.
</form>


<script>
var form = document.forms.form;
form.onsubmit = function() {
    var h = this.H.value;
    var r = this.R.value;
    var a = this.A.value;
    this.result.value = h*r*a;
    return false;
};
</script>
</body>
</html>

Tybalt · #3 (**permalink**) 19.01.2015, 20:45

Спасибо за уделенное внимание. А как осуществить мой замысел, без инпутов прям в тексте?

danik.js · #4 (**permalink**) 19.01.2015, 21:24

Инпут можно "замаскировать" через css.
Или заменить result.value на document.getElementById('result').innerHTML

Tybalt · #5 (**permalink**) 20.01.2015, 07:16

Я так понимаю, что innerHTML какраз и обнавляет страницу в браузере?

Tybalt · #6 (**permalink**) 20.01.2015, 08:53

Получилось! Спаисбо!

Tybalt · #7 (**permalink**) 26.01.2015, 10:53

Не могу понять почему в IE все работает а в Хроме все равно продолжает обнулять страницу?

Tybalt · #8 (**permalink**) 27.01.2015, 11:36

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>

<body>
<p style="text-align: center">
<script type="text/javascript">
function cilindr() {
obj=document.getElementById("Cilindr");
obj.style.display="block";
obj=document.getElementById("Cub");
obj.style.display="none";
}
function cub() {
obj=document.getElementById("Cub");
obj.style.display="block";
obj=document.getElementById("Cilindr");
obj.style.display="none";
}
</script></p>
<p style="text-align: center"> </p>
<table width="1000" border="0" align="center">
<tr>
<td colspan="10" style="text-align: center"><strong>ВЫБИРИТЕ НУЖНУЮ ВАМ ФИГУРУ ДЛЯ ДАЛЬНЕЙШИХ РАСЧЕТОВ:</strong></td>
</tr>
<tr>
<td width="100"><p style="text-align: center">
<img src="indexcilindr.png" onClick="cilindr();" width="31" height="67" alt=""/>
</p>
<p style="text-align: center; font-size: 14px;">
<strong onClick="cilindr();">ЦИЛИНДР</strong>
</p></td>
<td width="100"><p style="text-align: center; font-size: 14px;"><img src="indexcub.png" onClick="cub();" "width="66" height="67" alt=""/></p>
<p style="text-align: center; font-size: 14px;">
<strong onClick="cub();">КУБ</strong>
</p></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<hr>
<div id="Cilindr" style="display:none;">
</p>
<form id="form">
<table width="1000" border="0" align="center" cellspacing="0">
<tbody>
<tr>
<td colspan="2" style="text-align: center"><p><strong>РАСЧЕТ ПАРАМЕТРОВ И ОБЪЕМА ЖИДКОСТИ В БОЧКЕ ЦИЛИНДРИЧЕСКОЙ ФОРМЫ С РАВНЫМИ ОСНОВАНИЯМИ</strong></p>
<p>(Программа вычислит объем бочки, объем жидкости в бочке, свободный объем, площади круга оснований бочки, площадь боковой поверхности бочки, общую площадь поверхностей, длину хорды, длину окружности оснований бочки). </p></td>
</tr>
<tr>
<td> </td>
<td bgcolor="#E5E0E0"> </td>
</tr>
<tr>
<td><div align="center"><strong style="text-align: center">ВВЕДИТЕ ДАННЫЕ:</strong></div></td>
<td bgcolor="#E5E0E0"><div align="center"><strong style="text-align: center">ПОЛУЧЕННЫЕ ДАННЫЕ:</strong></div></td>
</tr>
<tr>
<td width="700"><div align="left">
<p align="center" style="text-align: left"><strong>Введите данные для расчета параметров бочки:</strong><br><br>
<input name="H" size="20px">
Укажите высоту бочки <strong style="color: #FF0004">H</strong> в миллиметрах. </p>
<p>
<input name="R" size="20px">
Укажите радиус бочки <strong style="color: #FF0004">R</strong> в миллиметрах.</p>
<p><strong>Дополнительно можно расчитать объем жидкости в бочке, задав уровень</strong> <strong style="color: #FF0004">А (предварительно заполнив данные выше)</strong><strong>:</strong></p>
<p><input name="A" size="20px">
Укажите уровень жидкости <strong style="color: #FF0004">А</strong> в миллиметрах.</p>
<p><strong style="text-align: center">Дополнительно можно расчитать длину хорды </strong><strong style="color: #FF0004">X</strong><strong style="text-align: center">, задав угол </strong><strong style="color: #FF0004">Q</strong> <strong style="text-align: center">в градусах</strong><strong style="color: #FF0004"> (предварительно заполнив значение R выше)<span style="color: #000000">:</span></strong></p>
<p>
<input name="B" size="20px">
Укажите угол<strong style="color: #FF0004"> Q </strong>в градусах (для вычисления хорды). </p>
<p>
<button type="submit">Расчитать</button>
<button type="reset">Очистить</button>
</p>
<p style="text-align: center"><img src="cilindr.png" width="462" height="290" alt=""/></p>
<p style="text-align: left"><strong style="color: #FF0004">H</strong> - высота бочки.</p>
<p style="text-align: left"><strong style="color: #FF0004">R </strong>- радиус окружности основания бочки.</p>
<p style="text-align: left"><strong style="color: #FF0004">А</strong> - уровень жидкости в бочке.</p>
<p style="text-align: left"><strong style="color: #FF0004">Q</strong> - угол между двумя радиусами окружности бочки.</p>
<p style="text-align: left"><strong style="color: #FF0004">X</strong> - длина хорды окружности основания бочки.</p>
</div></td>
<td width="300" bgcolor="#E5E0E0"><p align="center">
<p align="center"><strong>Объем емкости равен</strong> <strong id="result1" style=" color:#FF0000">_</strong> кубических миллиметров или <strong id="result2" style=" color:#FF0000">_</strong> кубических метров или <strong id="result3" style=" color:#FF0000">_</strong> литров.
<br>
<br>
<strong>Объем жидкости в емкости равен</strong> <strong id="result4" style=" color:#FF0000">_</strong> кубических миллиметров или <strong id="result5" style=" color:#FF0000">_</strong> кубических метров или <strong id="result6" style=" color:#FF0000">_</strong> литров.
<br>
<br>
<strong>Свободный объем в емкости равен</strong> <strong id="result7" style=" color:#FF0000">_</strong> кубических миллиметров или <strong id="result8" style=" color:#FF0000">_</strong> кубических метров или <strong id="result9" style=" color:#FF0000">_</strong> литров.
<br>
<br>
<strong>Длина окружности равна</strong> <strong id="result10" style=" color:#FF0000">_</strong> миллиметров или <strong id="result11" style=" color:#FF0000">_</strong> метров.
<br>
<br>
<strong>Площадь одного основания бочки равна</strong> <strong id="result12" style=" color:#FF0000">_</strong> квадратных миллиметров или <strong id="result13" style=" color:#FF0000">_</strong> квадратных метров.
<br>
<br>
<strong>Общая площадь оснований бочки равна</strong> <strong id="result14" style=" color:#FF0000">_</strong> квадратных миллиметров или <strong id="result15" style=" color:#FF0000">_</strong> квадратных метров.
<br>
<br>
<strong>Площадь боковой поверхности бочки равна</strong> <strong id="result16" style=" color:#FF0000">_</strong> квадратных миллиметров или <strong id="result17" style=" color:#FF0000">_</strong> квадратных метров.
<br>
<br>
<strong>Общая площадь всех поверхностей бочки равна</strong> <strong id="result18" style=" color:#FF0000">_</strong> квадратных миллиметров или <strong id="result19" style=" color:#FF0000">_</strong> квадратных метров.
<br>
<br>
<strong>Длина хорды окружности равна</strong> <strong id="result20" style=" color:#FF0000">_</strong> миллиметров или <strong id="result21" style=" color:#FF0000">_</strong> метров.
<br>
<br>
</div>
<p align="justify"><br>
</p></td>
</tr>
</tbody>
</table></form>
<script type="text/javascript">
var form = document.forms.form;
form.onsubmit = function ()
{
var h = this.H.value;
var r = this.R.value;
var a = this.A.value;
var b = this.B.value;
var integerA = parseInt(h);
var integerB = parseInt(a);
c = integerA - integerB;
d = (b*3.14159265/180)/2;
integerE = Math.sin(d);
f=2*r*integerE;

this.document.getElementById('result1').innerHTML = (3.14159265*r*r*h);
this.document.getElementById('result2').innerHTML = (3.14159265*r*r*h/1000000000).toFixed(4);
this.document.getElementById('result3').innerHTML =(3.14159265*r*r*h/1000000000*1000).toFixed(4);

this.document.getElementById('result4').innerHTML = (3.14159265*r*r*a);
this.document.getElementById('result5').innerHTML = (3.14159265*r*r*a/1000000000).toFixed(4);
this.document.getElementById('result6').innerHTML = (3.14159265*r*r*a/1000000000*1000).toFixed(4);

this.document.getElementById('result7').innerHTML = (3.14159265*r*r*c);
this.document.getElementById('result8').innerHTML =( 3.14159265*r*r*c/1000000000).toFixed(4);
this.document.getElementById('result9').innerHTML = (3.14159265*r*r*c/1000000000*1000).toFixed(4);

this.document.getElementById('result10').innerHTML =( 2*3.14159265*r);
this.document.getElementById('result11').innerHTML = (2*3.14159265*r/1000).toFixed(4);

this.document.getElementById('result12').innerHTML = (3.14159265*r*r);
this.document.getElementById('result13').innerHTML =( 3.14159265*r*r/1000000).toFixed(4);

this.document.getElementById('result14').innerHTML = ((3.14159265*r*r)*2);
this.document.getElementById('result15').innerHTML = ((3.14159265*r*r)*2/1000000).toFixed(4);

this.document.getElementById('result16').innerHTML = (2*3.14159265*r*h);
this.document.getElementById('result17').innerHTML = (2*3.14159265*r*h/1000000).toFixed(4);

this.document.getElementById('result18').innerHTML =((2*3.14159265*r*h)+((3.14159265*r*r)*2));
this.document.getElementById('result19').innerHTML = (((2*3.14159265*r*h)+((3.14159265*r*r)*2))/1000000).toFixed(4);

this.document.getElementById('result20').innerHTML = Math.round(f);
this.document.getElementById('result21').innerHTML = (f/1000).toFixed(4);

return false;
};

</script>

</div>
<div id="Cub" style="display:none;">
КУБ!
</div>
</body>
</html>

Tybalt · #9 (**permalink**) 27.01.2015, 11:38

Как оптимизировать и сделть что бы работал скрипт выше во всех браузерах.

danik.js · #10 (**permalink**) 27.01.2015, 13:30

Сообщение от Tybalt

var integerB = parseInt(a);
c = integerA - integerB;

Устал var'ы писать )))

Форум

Справочник

Discord чат

Курсы javascript