Что не так с кодом? - JavaScript, Ajax

SL1M_DOGG · 23.06.2013, 13:43

Здравствуйте. Сразу говорю я новичок. Решил написать калькулятор на js при помощи двух текстов и 4 кнопок. Привожу что получилось:
html:

Код HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
		<include src="calc.js">
		<include src="style.css">
    </head>
    <body>
	    <form name="form">
        <input type="text" id="number 1" placeholder="Введите значение 1">
		<input type="text" id="number 2" placeholder="Введите значение 2">
		<p>
		<input type="button" id="plus" value="Суммировать" onclick="calcul()"/>
		<input type="button" id="minus" value="Вычесть" onclick="calcul()"/>
		<input type="button" id="multiply" value="Умножить" onclick="calcul()"/>
		<input type="button" id="divide" value="Разделить" onclick="calcul()"/>
		</form>
    </body>
</html>

JS:

Код:

<script type="text/javascript">
function calcul(){
    var str,n1,n2,act,result;
	var fcalc=document.calculate;
	    n1=parseInt(getElementById('number 1').value);
		n2=parseInt(getElementById('number 2').value);
		switch (form.id){
		    case plus:
			    result=n1+n2;
				alert(result);
			break
			case minus:
			    result=n1-n2;
				alert(result);
			break
			case multiply:
			    result=n1*n2;
				alert(result);
			break
			case divide:
			    result=n1/n2;
				alert(result);
			break
		}	
}
</script>

Подскажите почему не работает.

Stilet · 23.06.2013, 14:16

Во-первых:

Код:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
		<include src="calc.js">
		<include src="style.css">
<script type="text/javascript">
function calcul(meID){
    var str,n1,n2,act,result;
	var fcalc=document.calculate;
	    n1=parseInt(getElementById('number 1').value);
		n2=parseInt(getElementById('number 2').value);
		if(meID=='plus')   result=n1+n2; else
		if(meID=='minus')   result=n1-n2;else
		if(meID=='multiply')   result=n1*n2;else
		if(meID=='divide')   result=n1/n2;
				alert(result);
	
}
</script>
    </head>
    <body>
	 
        <input type="text" id="number 1" placeholder="Введите значение 1">
		<input type="text" id="number 2" placeholder="Введите значение 2">
		<p>
		<input type="button" id="plus" value="Суммировать" onclick="calcul(this.id)"/>
		<input type="button" id="minus" value="Вычесть" onclick="calcul(this.id)"/>
		<input type="button" id="multiply" value="Умножить" onclick="calcul(this.id)"/>
		<input type="button" id="divide" value="Разделить" onclick="calcul(this.id)"/>
		
    </body>
</html>

Во-вторых: А почему не использовать eval() для этого?
Или это чисто учебная задача?

SL1M_DOGG · 23.06.2013, 14:43

чисто учебная задача... а совмещать хтмл и джэс это разве не "плохо"кодинг?

з.ы.: я бы даже согласился что совмещать хтмл с джэс это гуд, если бы оно работало.

Stilet · 23.06.2013, 16:48

Цитата:

а совмещать хтмл и джэс это разве не "плохо"кодинг?

Я для примера просто )

Цитата:

если бы оно работало.

Не работает? - отлично. У тебя есть все шансы научится работать с отладчиками типа FireBug для мозиллы. Или DragonFly для Оперы

Что же касаемо подсказки: Нет функции getElementById. Это метод свойства document, и вызывать его нужно соответственно: document.getElementById

SL1M_DOGG · 23.06.2013, 17:11

может я неправильно делаю связь между хтмл и джэс. Переписал весе более-менее по человечески, а оно даже не хочет вывести н1 через алерт

html:

Код HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
		<include src="calc.js">
		<include src="style.css">
    </head>
    <body>
	    <form name="myform">
        <input type="text" id="number 1" placeholder="Введите значение 1">
		<input type="text" id="number 2" placeholder="Введите значение 2">
		<p>
		<input type="submit" id="plus" value="Суммировать" onclick="calcul()"/>
		<input type="submit" id="minus" value="Вычесть" onclick="calcul()"/>
		<input type="submit" id="multiply" value="Умножить" onclick="calcul()"/>
		<input type="submit" id="divide" value="Разделить" onclick="calcul()"/>
		</form>
    </body>
</html>

JS:

PHP код:


			
<script type="text/javascript">

function calcul(){

    var str,n1,n2,act,result;

    var plus,minus,multiply,divide;

        n1=parseInt(document.myform.getElementById('number 1').value);

        n2=parseInt(document.myform.getElementById('number 2').value);

        plus=document.myform.getElementById('plus');

        minus=document.myform.getElementById('minus');

        multiply=document.myform.getElementById('multiply');

        divide=document.myform.getElementById('divide');

        plus.onclick=function(){

        alert('n1');

        result=n1+n2;

        alert('result');

        }

        minus.onclick=function(){

        result=n1-n2;

        alert('result');

        }

        multiply.onclick=function(){

        result=n1*n2;

        alert('result');

        }

        divide.onclick=function(){

        result=n1/n2;

        alert('result');

        }

</script>

BDA · 23.06.2013, 17:31

Все опять упирается в неиспользование отладчика.
У Вас функция calcul не закрыта.

Работает (у меня):

Код:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        
        <script type="text/javascript">
        function calcul(clicked_id){
                n1=parseInt(document.getElementById('number 1').value);
                n2=parseInt(document.getElementById('number 2').value);
                switch (clicked_id) {
                    case "plus":
                        alert(n1+n2);
                    break
                    case "minus":
                        alert(n1-n2);
                    break
                    case "multiply":
                        alert(n1*n2);
                    break
                    case "divide":
                        alert(n1/n2);
                }	
        }
        </script>

    </head>
    <body>
	    <form name="form">
        <input type="text" id="number 1" placeholder="Введите значение 1">
		<input type="text" id="number 2" placeholder="Введите значение 2">
		<p>
		<input type="button" id="plus" value="Суммировать" onclick="calcul(this.id)"/>
		<input type="button" id="minus" value="Вычесть" onclick="calcul(this.id)"/>
		<input type="button" id="multiply" value="Умножить" onclick="calcul(this.id)"/>
		<input type="button" id="divide" value="Разделить" onclick="calcul(this.id)"/>
		</form>
    </body>
</html>

SL1M_DOGG · 23.06.2013, 19:08

Закрыл функцию, результата ноль... Скачал фаербаг, но на мой фаерфокс он не становиться, а качать новый фаерфокс возможности нет... сейчас за городом с 3Г

p.s.: Прифигачил гугл файрбаг, но он с локалкой не работает, закинул на сервер, но и здесь он видит только GoogleChrome.js, а мой Calc.js не видит =(

BDA · 23.06.2013, 19:12

Я не говорил, что это единственная ошибка.
Что такое document.myform.getElementById?
Нужно просто document.getElementById.

SL1M_DOGG · 23.06.2013, 19:18

изменил на документ.гетэлемент, все ноль.

BDA · 23.06.2013, 19:38

Код:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <script src="./calc.js"></script>
    </head>
    <body>
        <form name="myform">
            <input type="text" id="number 1" placeholder="Введите значение 1">
            <input type="text" id="number 2" placeholder="Введите значение 2">
            <p>
            <input type="submit" id="plus" value="Суммировать" onclick="return calcul(this.id);"/>
            <input type="submit" id="minus" value="Вычесть" onclick="return calcul(this.id);"/>
            <input type="submit" id="multiply" value="Умножить" onclick="return calcul(this.id);"/>
            <input type="submit" id="divide" value="Разделить" onclick="return calcul(this.id);"/>
        </form>
    </body>
</html>

calc.js:

Код:

function calcul(clicked_id) {
    n1=parseInt(document.getElementById('number 1').value);
    n2=parseInt(document.getElementById('number 2').value);
    switch (clicked_id) {
        case "plus":
            alert(n1+n2);
            break
        case "minus":
            alert(n1-n2);
            break
        case "multiply":
            alert(n1*n2);
            break
        case "divide":
            alert(n1/n2);
    }
    return false;
}

23.06.2013, 14:43	#3
SL1M_DOGG Пользователь Регистрация: 08.06.2009 Сообщений: 96	чисто учебная задача... а совмещать хтмл и джэс это разве не "плохо"кодинг? з.ы.: я бы даже согласился что совмещать хтмл с джэс это гуд, если бы оно работало. Последний раз редактировалось SL1M_DOGG; 23.06.2013 в 16:10.

23.06.2013, 19:08	#7
SL1M_DOGG Пользователь Регистрация: 08.06.2009 Сообщений: 96	Закрыл функцию, результата ноль... Скачал фаербаг, но на мой фаерфокс он не становиться, а качать новый фаерфокс возможности нет... сейчас за городом с 3Г p.s.: Прифигачил гугл файрбаг, но он с локалкой не работает, закинул на сервер, но и здесь он видит только GoogleChrome.js, а мой Calc.js не видит =( Последний раз редактировалось SL1M_DOGG; 23.06.2013 в 19:16.

23.06.2013, 19:12	#8
BDA МегаМодератор СуперМодератор Регистрация: 09.11.2010 Сообщений: 7,431	Я не говорил, что это единственная ошибка. Что такое document.myform.getElementById? Нужно просто document.getElementById. Пишите язык программирования - это форум программистов, а не экстрасенсов. (<= это подпись )

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
что не так с кодом?	MICROSONIC	C++ Builder	4	07.03.2012 01:07
Что с моим кодом не так?	cooky	Visual C++	1	28.02.2012 15:10
Подскажите, что не так с кодом	Grisha248	Помощь студентам	2	24.05.2009 16:41
Что с кодом ?	Look	Общие вопросы C/C++	11	06.11.2007 14:48

23.06.2013, 17:11	#5
SL1M_DOGG Пользователь Регистрация: 08.06.2009 Сообщений: 96	может я неправильно делаю связь между хтмл и джэс. Переписал весе более-менее по человечески, а оно даже не хочет вывести н1 через алерт html: Код HTML: <!DOCTYPE html> <html> <head> <meta charset=utf-8> <include src="calc.js"> <include src="style.css"> </head> <body> <form name="myform"> <input type="text" id="number 1" placeholder="Введите значение 1"> <input type="text" id="number 2" placeholder="Введите значение 2"> <p> <input type="submit" id="plus" value="Суммировать" onclick="calcul()"/> <input type="submit" id="minus" value="Вычесть" onclick="calcul()"/> <input type="submit" id="multiply" value="Умножить" onclick="calcul()"/> <input type="submit" id="divide" value="Разделить" onclick="calcul()"/> </form> </body> </html> JS: PHP код: <script type="text/javascript"> function calcul(){ var str,n1,n2,act,result; var plus,minus,multiply,divide; n1=parseInt(document.myform.getElementById('number 1').value); n2=parseInt(document.myform.getElementById('number 2').value); plus=document.myform.getElementById('plus'); minus=document.myform.getElementById('minus'); multiply=document.myform.getElementById('multiply'); divide=document.myform.getElementById('divide'); plus.onclick=function(){ alert('n1'); result=n1+n2; alert('result'); } minus.onclick=function(){ result=n1-n2; alert('result'); } multiply.onclick=function(){ result=n1*n2; alert('result'); } divide.onclick=function(){ result=n1/n2; alert('result'); } </script>

23.06.2013, 19:18	#9
SL1M_DOGG Пользователь Регистрация: 08.06.2009 Сообщений: 96	изменил на документ.гетэлемент, все ноль.