02.07.2021, 07:31
|
|
Интересующийся
|
|
Регистрация: 07.05.2021
Сообщений: 16
|
|
|
Реализуйте описанный калькулятор.
Давайте реализуем калькулятор. Он будет работать как обычный классический калькулятор: у вас будет инпут, а под ним кнопочки с цифрами и знаками операций. По нажатию на цифры они должны появляться в инпуте. По нажатию на знак операции число из инпута должно исчезать. После этого при вводе следующего числа в инпут и нажатия на знак равно в инпуте должен появится результат операции.
Реализуйте описанный калькулятор.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>focusout</title>
</head>
<body>
<! -- Задача 7.2>
<p></p>
<input type="text">
<table>
</table>
<script>
'use struck';
let p = document.querySelector('p');
let input =document.querySelector('input');
let table = document.querySelector('table');
let arr=['1', '2', '3', '4', '5', '6', '7', '8', '9', '0','-', '+', '*','='];
createTable();
addEvents();
function createTable() {
let k =0;
for (let i = 0; i ; i++) {
let tr=document.createElement('tr');
table.appendChild(tr);
for (let j = 0; j <5 ; j++) {
if (arr[k]!=undefined){
let td=document.createElement('td');
td.innerHTML=arr[k];
tr.appendChild(td);
}
k++;
}
}
}
function addEvents() {
let td = document.querySelectorAll('td');
for (let elem of td){
elem.addEventListener('click',function () {
if (elem.innerHTML!='='){
input.value=elem.innerHTML;
p.innerHTML+=elem.innerHTML;
}else{
let otw=eval(p.innerHTML);
p.innerHTML+=' = '+otw;
}
})
}
}
</script>
</body>
</html>
|
|
02.07.2021, 07:32
|
|
Интересующийся
|
|
Регистрация: 07.05.2021
Сообщений: 16
|
|
|
не работает
|
|
02.07.2021, 07:58
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,285
|
|
Клик нужно вешать на всю таблицу, а по содержимому определять что с этим кликом делать...  |
|
02.07.2021, 08:01
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,285
|
|
|
Сообщение от javascript888
|
|
не работает
|
|
Сообщение от javascript888
|
for (let i = 0; i ; i++)
|
Вот это что такое? |
|
02.07.2021, 08:03
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,285
|
|
javascript888, хватит генерить английские слова. 
Начинай писать осмысленный код и учись проверять его по шагам.
Иначе это не программирование. 
|
|
02.07.2021, 08:39
|
|
Интересующийся
|
|
Регистрация: 07.05.2021
Сообщений: 16
|
|
|
|
|
02.07.2021, 10:26
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,285
|
|
|
Сообщение от javascript888
|
|
как этому научиться?
|
Написал что-то проверь как это работает...
А ты пишешь якобы всю программу, а потом она у тебя не работает.
Ты начинаешь спрашивать - почему.
Хотя у тебя первый же цикл уже бессмысленный.
Какой смысл писать дальше?
Нужно отладить сам цикл, написать его правильно. Цикл так же можно проверить по шагам, если разместить внутрь вывод на экран (или консоль) неких данных... |
|
02.07.2021, 11:04
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
|
|
02.07.2021, 12:08
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
calculator калькулятор
javascript888,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>calculator</title>
<style type="text/css">
table {
border-collapse: collapse;
margin: 5px;
}
td {
height: 40px;
width: 40px;
border: 1px solid rgba(0, 0, 0, 1);
text-align: center;
font-size: 32px;
}
</style>
</head>
<body>
<input type="text">
<table></table>
<script>
'use strict';
let input = document.querySelector('input');
let table = document.querySelector('table');
let arr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '+', '*', '/', '='];
createTable(arr, 5, table);
function createTable(arr, columns, table) {
let html = document.createDocumentFragment(),
tr;
arr.forEach((v, i) => {
if (i % columns === 0) {
tr = document.createElement('tr');
html.append(tr)
};
let td = document.createElement('td');
td.innerHTML = v;
td.onclick = addEvents.bind(null, v);
tr.append(td);
})
table.append(html)
}
function addEvents(v) {
if (v == +v) {
if (input.dataset.end) {
input.value = v;
input.dataset.end = input.dataset.action = '';
} else input.value += v;
}
if (['-', '+', '*', '/'].includes(v)) {
input.dataset.a = input.value;
input.dataset.action = v;
input.value = input.dataset.end = '';
}
if (v == '=') {
if (!input.value || !input.dataset.action) return;
if (!input.dataset.end) input.dataset.b = input.value;
input.dataset.end = 1;
let a = +input.dataset.a;
let b = +input.dataset.b;
let action = input.dataset.action;
if (action === '+') input.dataset.a = input.value = (a + b).toFixed(2);
if (action === '-') input.dataset.a = input.value = (a - b).toFixed(2);
if (action === '*') input.dataset.a = input.value = (a * b).toFixed(2);
if (action === '/') input.dataset.a = input.value = (a / b).toFixed(2);
}
}
</script>
</body>
</html>
|
|
|
|
