test.html 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" href="style.css">
  6. <title>Title</title>
  7. </head>
  8. <body>
  9. <select>
  10. <option selected disabled>Выберите тип калькулятора</option>
  11. <option value="1">Простой</option>
  12. <option value="2">Сложный</option>
  13. </select>
  14. <label for="calc">Введите пример:</label>
  15. <input id="calc">
  16. <div id="result">Результат: </div>
  17. <script>
  18. let select = document.querySelector('select'); // находим список
  19. // событие, реагирующее на изменение списка (выбор простого или сложного калькулятора)
  20. select.addEventListener('change',()=> {
  21. let index = select.value; // переменная для хранения выбранного значения в списке
  22. if (index==1) {
  23. // событие, срабатывающее после нажатия клавиши Enter;
  24. document.addEventListener('keydown', function (event) {
  25. if (event.code=="Enter") {
  26. let example = document.getElementById('calc').value; // значение внутри поля для ввода
  27. let signIndexPlus = example.indexOf('+'); // индекс символа "+" в строке
  28. // если плюс в строке найден:
  29. if (signIndexPlus>0) {
  30. let left = Number(example.substring(0,signIndexPlus)); // число, стоящее левее знака "+"
  31. let right = Number(example.substring(signIndexPlus+1,example.length)); // число, стоящее правее знака "+"
  32. let answer = left+right;
  33. let result = document.querySelector("#result");
  34. result.textContent="Результат: " + answer;
  35. }
  36. // дальше можно прописать систему условий на нахождение других арифметических знаков и дальнейший подсчет результата
  37. }
  38. })
  39. }
  40. if (index==2) {
  41. // код для сложного калькулятора
  42. }
  43. })
  44. </script>
  45. </body>
  46. </html>