Обновляется страница! Нужна помощь!
Здравствуйте! У меня возникла проблема. Я решил создать калькулятор, в котором после нажатия на одну из кнопок подсчёта, результат должен появится в окне для результата, он там появляется, но через пол секунды страница обновляется... Думаю проблема в функциях, но я не уверен...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HamCulator</title>
</head>
<body>
<STYLE TYPE="text/css">
<!--
BODY
{
font-family:Arial;
}
-->
</STYLE>
<script Language="JavaScript" type="text/javascript">
function countDegree() {
var numberOne = Number(document.forms.input.number_one.value);
var numberTwo = Number(document.forms.input.number_two.value);
var number = numberOne;
var degree = numberTwo;
degree --;
while(degree > 0) {
number = number * numberOne;
degree--;
}
document.getElementById('result').value = number;
}
function countSqrt() {
var numberOne = Number(document.forms.input.number_one.value);
var result = Math.sqrt(numberOne);
document.getElementById('result').value = result;
}
function countAdd() {
var numberOne = Number(document.forms.input.number_one.value);
var numberTwo = Number(document.forms.input.number_two.value);
var result = numberOne + numberTwo;
document.getElementById('result').value = result;
}
function countSubstract() {
var numberOne = Number(document.forms.input.number_one.value);
var numberTwo = Number(document.forms.input.number_two.value);
var result = numberOne - numberTwo;
document.getElementById('result').value = result;
}
function countMultiply() {
var numberOne = Number(document.forms.input.number_one.value);
var numberTwo = Number(document.forms.input.number_two.value);
var result = numberOne * numberTwo;
document.getElementById('result').value = result;
}
function countDivide() {
var numberOne = Number(document.forms.input.number_one.value);
var numberTwo = Number(document.forms.input.number_two.value);
var result = numberOne / numberTwo;
document.getElementById('result').value = result;
}
</script>
<style media="screen" type="text/css">
.btnStyle1 {
width:155px;height:25px;font-family:Arial;
}
.inputText1 {
width:150px;font-family:Arial;text-align:center;
}
</style>
<div style="text-align:center;">
<h1 class="title">HamCulator</h1>
<form name="input">
<div>
<input class="inputText1" id="number_one" type="text" name="number_one" autocomplete="off" placeholder="Enter number #1">
</div>
<div>
<input class="inputText1" id="number_two" type="text" name="number_two" autocomplete="off" placeholder="Enter number #2">
</div>
<div>
<input class="inputText1" id="result" type="text" name="result" autocomplete="off" value="" placeholder="Result">
</div>
<div>
<button class="btnStyle1" style="cursor:pointer;" OnClick="countDegree()">Count with degree</button>
</div>
<div>
<button class="btnStyle1" style="cursor:pointer;" OnClick="countSqrt()">Square root</button>
</div>
<div>
<button class="btnStyle1" style="cursor:pointer;" OnClick="countAdd()">Add</button>
</div>
<div>
<button class="btnStyle1" style="cursor:pointer;" OnClick="countSubstract()">Substract</button>
</div>
<div>
<button class="btnStyle1" style="cursor:pointer;" OnClick="countMultiply()">Multiply</button>
</div>
<div>
<button class="btnStyle1" style="cursor:pointer;" OnClick="countDivide()">Divide</button>
</div>
</form>
</div>
</body>
</html>
|
window.onload = function() {
document.forms.input.onsubmit = function() {
return false;
}
}
|
Не то...
|
Hamty, что нужно делать в твоем примере, дабы увидеть ту "перезагрузку"?
|
Если нажать на кнопку подсчета(одну из них), то страница обновляется.
|
Цитата:
Код:
<button type="button" style="cursor:pointer;" OnClick="countSqrt()">Square root</button> |
Не помогает,
<input type="button" style="cursor:pointer;" OnClick="countSqrt()">Square root</button> Input так-же не работает... :( |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HamCulator</title>
</head>
<body>
<STYLE TYPE="text/css">
<!--
BODY
{
font-family:Arial;
}
-->
</STYLE>
<script Language="JavaScript" type="text/javascript">
function countDegree() {
var numberOne = Number(document.forms.input.number_one.value);
var numberTwo = Number(document.forms.input.number_two.value);
var number = numberOne;
var degree = numberTwo;
degree --;
while(degree > 0) {
number = number * numberOne;
degree--;
}
document.getElementById('result').value = number;
}
function countSqrt() {
var numberOne = Number(document.forms.input.number_one.value);
var result = Math.sqrt(numberOne);
document.getElementById('result').value = result;
}
function countAdd() {
var numberOne = Number(document.forms.input.number_one.value);
var numberTwo = Number(document.forms.input.number_two.value);
var result = numberOne + numberTwo;
document.getElementById('result').value = result;
}
function countSubstract() {
var numberOne = Number(document.forms.input.number_one.value);
var numberTwo = Number(document.forms.input.number_two.value);
var result = numberOne - numberTwo;
document.getElementById('result').value = result;
}
function countMultiply() {
var numberOne = Number(document.forms.input.number_one.value);
var numberTwo = Number(document.forms.input.number_two.value);
var result = numberOne * numberTwo;
document.getElementById('result').value = result;
}
function countDivide() {
var numberOne = Number(document.forms.input.number_one.value);
var numberTwo = Number(document.forms.input.number_two.value);
var result = numberOne / numberTwo;
document.getElementById('result').value = result;
}
</script>
<style media="screen" type="text/css">
.btnStyle1 {
width:155px;height:25px;font-family:Arial;
}
.inputText1 {
width:150px;font-family:Arial;text-align:center;
}
</style>
<div style="text-align:center;">
<h1 class="title">HamCulator</h1>
<form name="input">
<div>
<input class="inputText1" id="number_one" type="text" name="number_one" autocomplete="off" placeholder="Enter number #1">
</div>
<div>
<input class="inputText1" id="number_two" type="text" name="number_two" autocomplete="off" placeholder="Enter number #2">
</div>
<div>
<input class="inputText1" id="result" type="text" name="result" autocomplete="off" value="" placeholder="Result">
</div>
<div>
<button type="button" class="btnStyle1" style="cursor:pointer;" OnClick="countDegree()">Count with degree</button>
</div>
<div>
<button type="button" class="btnStyle1" style="cursor:pointer;" OnClick="countSqrt()">Square root</button>
</div>
<div>
<button type="button" class="btnStyle1" style="cursor:pointer;" OnClick="countAdd()">Add</button>
</div>
<div>
<button type="button" class="btnStyle1" style="cursor:pointer;" OnClick="countSubstract()">Substract</button>
</div>
<div>
<button type="button" class="btnStyle1" style="cursor:pointer;" OnClick="countMultiply()">Multiply</button>
</div>
<div>
<button type="button" class="btnStyle1" style="cursor:pointer;" OnClick="countDivide()">Divide</button>
</div>
</form>
</div>
</body>
</html>
|
Тоже не помогает :С
|
Цитата:
|
| Часовой пояс GMT +3, время: 05:18. |