Реализуйте описанный калькулятор.
Давайте реализуем калькулятор. Он будет работать как обычный классический калькулятор: у вас будет инпут, а под ним кнопочки с цифрами и знаками операций. По нажатию на цифры они должны появляться в инпуте. По нажатию на знак операции число из инпута должно исчезать. После этого при вводе следующего числа в инпут и нажатия на знак равно в инпуте должен появится результат операции.
Реализуйте описанный калькулятор. <!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>
|
не работает
|
Клик нужно вешать на всю таблицу, а по содержимому определять что с этим кликом делать... ;)
|
Цитата:
Цитата:
|
javascript888, хватит генерить английские слова. :)
Начинай писать осмысленный код и учись проверять его по шагам. Иначе это не программирование. :no: |
Цитата:
|
Цитата:
А ты пишешь якобы всю программу, а потом она у тебя не работает. Ты начинаешь спрашивать - почему. Хотя у тебя первый же цикл уже бессмысленный. Какой смысл писать дальше? Нужно отладить сам цикл, написать его правильно. Цикл так же можно проверить по шагам, если разместить внутрь вывод на экран (или консоль) неких данных... |
javascript888,
https://learn.javascript.ru/strict-mode |
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>
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Console</title>
</head>
<body>
<!-- console.js -->
<script>
// log() displays messages
(function() {
var parentElement = document.createElement('div');
parentElement.style.cssText =
'position: fixed; top: 5px; right: 5px; z-index: 100;' +
'min-width: 200px; max-height: 200px; padding: 5px; overflow-y: scroll;' +
'font: 12px/1.5 monospace; color: white; text-align: left;' +
'background: black; opacity: 0.5;';
parentElement.textContent = 'Console';
document.body.appendChild(parentElement);
var consoleLog = console.log;
window.log = console.log = function() {
var message = '>';
for (var i = 0; i < arguments.length; i++) message += ' ' + arguments[i];
var childElement = document.createElement('div');
childElement.style.cssText =
'border-bottom: 1px dotted gray';
childElement.textContent = message;
parentElement.appendChild(childElement);
parentElement.scrollTop = parentElement.scrollHeight - parentElement.clientHeight;
consoleLog.apply(console, arguments);
};
})();
// time() returns HH:MM:SS.mmm
(function() {
var format = {
hour: '2-digit', minute: '2-digit', second: '2-digit',
fractionalSecondDigits: 3, hour12: false
};
window.time = function(date) {
return (date || new Date).toLocaleTimeString('en', format);
};
})();
// index() returns increment
(function() {
var indexes = {};
window.index = function(name) {
return indexes[name] = (name in indexes) ? indexes[name] + 1 : 0;
};
})();
</script>
<!-- main.js -->
<script>
log('SCRIPT start=', time());
f1();
f2();
function f1() {
log('FUNC f1');
let k = 0;
for (let i = 0; i < 2; i++) {
log('- FOR i=', i);
for (let j = 0; j < 4; j++) {
log('-- FOR j=', j);
if (k % 2) {
log('--- IF k=', k);
} else {
log('--- ELSE k=', k);
}
k++;
}
}
}
function f2() {
console.log('FUNC f2');
}
log('SCRIPT end=', time());
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 09:17. |