Усовершенствование javascript калькулятора

@hbsv · Регистрация: 06.01.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте Форумчане!

Нужна небольшая помощь, решил начать изучать "html css javascript",

и получил задание написать простейший калькулятор, за основу взял html + javascript:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<body>
 
<form name="taschenrechner" id="calculator">
          <table>
          <tr>
          <td>
          
                 <input type="text" name="input" size="16" class="display">
               
                             
          </td>
          </tr>
          <tr>
          <td class="buttons">
      
 
          <input type="button" name="ein" value="1" OnClick="taschenrechner.input.value += '1'">
          <input type="button" name="zwei" value="2" OnClick="taschenrechner.input.value += '2'">
          <input type="button" name="drei" value="3" OnClick="taschenrechner.input.value += '3'">
          <input type="button" name="add" value="+" onclick="taschenrechner.input.value += '+'" >
          <br>
          <input type="button" name="vier" value="4" OnClick="taschenrechner.input.value += '4'">
          <input type="button" name="funf" value="5" OnClick="taschenrechner.input.value += '5'">
          <input type="button" name="sechs" value="6" OnClick="taschenrechner.input.value += '6'">
          <input type="button" name="sub" value="-" OnClick="taschenrechner.input.value += '-'">
          <br>
          <input type="button" name="sieben" value="7" OnClick="taschenrechner.input.value += '7'">
          <input type="button" name="acht" value="8" OnClick="taschenrechner.input.value += '8'">
          <input type="button" name="neun" value="9" OnClick="taschenrechner.input.value += '9'">
          <input type="button" name="zehn" value="x" OnClick="taschenrechner.input.value += '*'">
          <br>
          <input type="button" name="clear" value="c" OnClick="taschenrechner.input.value = ''">
          <input type="button" name="null" value="0" OnClick="taschenrechner.input.value += '0'">
          <input type="button" name="macht" value="=" OnClick="taschenrechner.input.value = eval(taschenrechner.input.value)">
          <input type="button" name="div" value="/" OnClick="taschenrechner.input.value += '/'">
      </td>
      </tr>
      </table>
 
</form>
 
 
</body>

и css:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
@charset "utf-8";
/* CSS Document */
 
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    
    font: bold 14px Arial, sans-serif;
}
 
 
html {
    height: 100%;
    background: white;
    background: radial-gradient(circle, #fff 20%, #ccc);
    background-size: cover;
}
 
#calculator * {font-size: 20px;}
#calculator table {
    border: solid 3px silver; 
    border-spacing: 3px; 
    background-color: #EEE; 
    }
#calculator table td {border-spacing: 3px;}
#calculator table {margin: 100px auto;}
input.display {
    width: 275px; 
    height:40px; 
    text-align: right;
    }
td.buttons {border-top: solid 1px silver;}  
input[type= button] {
    width: 65px; 
    height: 50px;
    }
 
</style>

И мне кажется, что выглядит все очень слабенько, поэтому хочу до усовершенствовать, а именно:

1) Улучшить javascript путем вынесения обработчиков во внешние функции (отделение во внешний файл);
2) Вместо имен объектов использовать идентификаторы и обращаться к ним через GetElementByID;

PS (Так же брал другой скрипт, красивый калькулятор с thecodeplayer , мне все очень понравилось, потратил на него 2 дня, но javascript показался мне очень сложным, не могу его понять, я мне нужно будет потом объяснить что к чему) (Написал для того, что может кто знает этот скрипт и сможет мне объяснить)))

Обращаюсь на форум как в последнюю инстанцию, т.к. времени у меня осталось до вечера, и смогу ли все успеть не факт, поэтому буду очень рад любому совету и любой помощи.

Заранее очень благодарен
С ув. Сергей!

@arcmag · 06.01.2016, 13:17

Вот как вариант можете попробовать мой калькуль вроде бы работал почти без ошибок

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
        *{margin:  0px; padding: 0px; font-size: 100%; box-sizing: border-box; -moz-box-sizing: border-box;}
        #calc{width: 400px; border: solid 3px rgba(155,155,155,0.7); margin: 100px auto;}
        #calc .w{padding: 5px;}
        #calc .w input{padding: 7px 12px; display: block; width: 100%; text-align: right; outline: 0px;}
        #calc .line{}
        #calc .line:after{clear: both; content: ""; display: table;}
        #calc .line > div{width: 25%; float: left; padding: 4px 5px;}
        #calc .line > .row2{width: 50%; float: left; padding: 4px 5px;}
        #calc .line > .row3{width: 75%;}
        #calc .line > .row4{width: 100%;}
        #calc .line .action{background: rgba(155,155,155,0.7); border: 0px;}
        #calc .line .action{background: rgba(155,155,155,0.7); border: 0px;}
        #calc .line > div > div{
            border-radius: 4px;
            padding: 4px 5px;
            text-align: center;
            border: solid 1px rgba(100,100,100,.3);
            transition: all .3s;
        }
        #calc .line > div > div:hover{box-shadow: inset 0px 0px 12px blue;}
        #calc .line > div > div:active{box-shadow: inset 0px 0px 12px orange; transition: none;}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
        function myCalculate (calculate) {
            var calc = typeof calculate === "string" ? document.querySelector (calculate) : calculate,
                t = calc.querySelector (".w input[type='text']"), s = "", v = "",
                result = function () {
                    t.value = v = eval (s); s = "";
                },
                action = function (a) {
                    s += v; t.value = v = "";
                    a === "=" && s !== "=" ? result () : s += a;
                },
                a = function (e) {
                    var k = String.fromCharCode(e.keyCode);
                    if (/[-=+*/]/.test (k)) {
                        action (k);
                        e.preventDefault ();
                        return false;
                    }
                    else if (/\D/.test (this.value)) this.value = v;
                    else v = this.value + k;
                },
                f = function (e) {
                    var o = e.target;
                    if (!o.parentNode.parentNode.classList.contains ("line")) return;
                    if (/[-=+*/]/.test (o.innerHTML)) action (o.innerHTML);
                    else t.value = v += o.innerHTML;
                };
            calc.addEventListener ("click", f);
            t.addEventListener ("keypress", a);
        };
        window.addEventListener ("load", function () {
            myCalculate ("#calc");
        });

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    <div id="calc">
        <div class="w">
            <input type="text" placeholder="0">
        </div>
        <div class="line">
            <div><div>1</div></div>
            <div><div>2</div></div>
            <div><div>3</div></div>
            <div><div>4</div></div>
        </div>
        <div class="line">
            <div><div>5</div></div>
            <div><div>6</div></div>
            <div><div>7</div></div>
            <div><div>8</div></div>
        </div>
        <div class="line">
            <div><div>9</div></div>
            <div><div>0</div></div>
            <div><div class="action">+</div></div>
            <div><div class="action">-</div></div>
        </div>
        <div class="line">
            <div><div class="action">*</div></div>
            <div><div class="action">/</div></div>
            <div class="row2"><div class="action">=</div></div>
        </div>
    </div>

@hbsv · 06.01.2016, 15:25 **[ТС]**

Спасибо большое, буду иметь как вариант.
Пока время есть, хотелось бы начатый до ума довести.
Не могу найти инфу как вывести во внешние функции и использовать GetElementByID, что-то нашел, но не могу понять как переделать.

Добавлено через 1 час 45 минут
Большое всем спасибо!
Уже все нашел, тему можно закрывать))

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@hbsv 0 / 0 / 0 Регистрация: 06.01.2016 Сообщений: 12
	06.01.2016, 15:25 [ТС]
	Спасибо большое, буду иметь как вариант. Пока время есть, хотелось бы начатый до ума довести. Не могу найти инфу как вывести во внешние функции и использовать GetElementByID, что-то нашел, но не могу понять как переделать. Добавлено через 1 час 45 минут Большое всем спасибо! Уже все нашел, тему можно закрывать)) 0

Усовершенствование javascript калькулятора

Решение