Блог

Главная - Вопросы по программированию - Как объединить цифры в число

Как объединить цифры в число

#javascript #html

Вопрос:

Я пытаюсь создать калькулятор на своем веб-сайте, поэтому я использую HTML и Javascript . Я добавил несколько кнопок, и когда я нажимаю, он меняет номер, и он не добавляет его после последнего элемента.

Вот как это выглядит :

Как вы можете видеть, он просто заменяет номер.

Вот мой код :

 function onClick(num) {
  document.getElementById('number').innerHTML = num;
} 
 <div>
  <p>Enter number(s) :
    <a id="number"></a>
  </p>

  <div>
    <button type="button" onclick="onClick(7)">7</button>
    <button type="button" onclick="onClick(8)">8</button>
    <button type="button" onclick="onClick(9)">9</button>
  </div>

  <div>
    <button type="button" onclick="onClick(4)">4</button>
    <button type="button" onclick="onClick(5)">5</button>
    <button type="button" onclick="onClick(6)">6</button>
  </div>

  <div>
    <button type="button" onclick="onClick(1)">1</button>
    <button type="button" onclick="onClick(2)">2</button>
    <button type="button" onclick="onClick(3)">3</button>
  </div>

  <div>
    <button type="button" onclick="onClick('=')">=</button>
    <button type="button" onclick="onClick(0)">0</button>
    <button type="button" onclick="onClick('.')">.</button>
  </div>
</div>

О, и я не прошу никакого кода, я просто прошу небольшой подсказки о том, как делать то, что я хочу. И да, я искал в Интернете, но не нашел того, что хотел.

Спасибо!

Ответ №1:

Вы могли бы объединить innerHTML с = , чтобы он не перезаписывал существующий innerHTML .

Рабочий пример:

 function onClick(num) {
  document.getElementById('number').innerHTML  = num;
} 
 #calculator {
  padding: 5px;
  background-color: #549699;
} 
 <div id="calculator">
  <p>Enter number(s) :
    <a id="number"></a>
  </p>
  <div>
    <button type="button" onclick="onClick(7)">7</button>
    <button type="button" onclick="onClick(8)">8</button>
    <button type="button" onclick="onClick(9)">9</button>
  </div>
  <div>
    <button type="button" onclick="onClick(4)">4</button>
    <button type="button" onclick="onClick(5)">5</button>
    <button type="button" onclick="onClick(6)">6</button>
  </div>
  <div>
    <button type="button" onclick="onClick(1)">1</button>
    <button type="button" onclick="onClick(2)">2</button>
    <button type="button" onclick="onClick(3)">3</button>
  </div>
  <div>
    <button type="button" onclick="onClick('=')">=</button>
    <button type="button" onclick="onClick(0)">0</button>
    <button type="button" onclick="onClick('.')">.</button>
  </div>
</div>

Базовый калькулятор:

С window[operation]() помощью вы можете вызвать функцию с operation именем функции as. Например window['multiply']() , это то же самое, что multiply() .

 const output = document.getElementById('number');
let operation = '';
let temp_result = 0;

function onClick(num) {
  output.innerHTML  = num;
}

function divide(a, b) {
  return a / b;
}

function multiply(a, b) {
  return a * b;
}

function subtract(a, b) {
  return a - b;
}

function addNumber(a, b) {
  return a   b;
}

function chooseOperation(choice) {
  operation = choice;
  temp_result = parseFloat(output.innerHTML);
  output.innerHTML = '';
}

function startCalculation() {
  if (operation != '') {
    let operator = parseFloat(output.innerHTML)
    output.innerHTML = window[operation](temp_result, operator);
  }
  operation = '';
} 
 #calculator {
  padding: 5px;
  background-color: #549699;
}

button {
  width: 20px;
  height: 20px;
  margin: 2px 0;
} 
 <div id="calculator">
  <p>Enter number(s) :
    <a id="number"></a>
  </p>
  
  <div>
    <button type="button" onclick="onClick(7)">7</button>
    <button type="button" onclick="onClick(8)">8</button>
    <button type="button" onclick="onClick(9)">9</button>
    <button type="button" onclick="chooseOperation('divide')">/</button>
  </div>
  
  <div>
    <button type="button" onclick="onClick(4)">4</button>
    <button type="button" onclick="onClick(5)">5</button>
    <button type="button" onclick="onClick(6)">6</button>
    <button type="button" onclick="chooseOperation('multiply')">*</button>
  </div>
  
  <div>
    <button type="button" onclick="onClick(1)">1</button>
    <button type="button" onclick="onClick(2)">2</button>
    <button type="button" onclick="onClick(3)">3</button>
    <button type="button" onclick="chooseOperation('subtract')">-</button>
  </div>
  
  <div>
    <button type="button" onclick="startCalculation()">=</button>
    <button type="button" onclick="onClick(0)">0</button>
    <button type="button" onclick="onClick('.')">.</button>
    <button type="button" onclick="chooseOperation('addNumber')"> </button>
  </div>
</div>

Расширенный калькулятор:

 const output = document.getElementById('number');
let operation = '';
let temp_result = 0;

function addChar(num) {
  if (output.innerHTML == 0) {
    output.innerHTML = num;
  }
  else {
    output.innerHTML  = num;
  }
}

function divide(a, b) {
  return a / b;
}

function multiply(a, b) {
  return a * b;
}

function subtract(a, b) {
  return a - b;
}

function addNumber(a, b) {
  return a   b;
}

function calculate() {
  if (operation != '') {
    let operator = parseFloat(output.innerHTML)
    output.innerHTML = window[operation](temp_result, operator);
  }
}

function chooseOperation(choice) {
  calculate();
  operation = choice;
  temp_result = parseFloat(output.innerHTML);
  output.innerHTML = 0;
}

function startCalculation() {
  calculate();
  operation = '';
}

function reset() {
  output.innerHTML = 0;
  operation = '';
} 
 #calculator {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 95px;
  padding: 3px;
  border: 1px solid #aaa;
  background-color: #549699;
}

#number {
  width: 96%;
  height: 20px;
  margin: 5px 0;
  border: 1px solid #aaa;
  text-align: end;
  overflow: hidden;
  background-color: #fff;
}

button {
  width: 20px;
  height: 20px;
  margin: 2px 0;
}

#reset {
  width: 96%;
}

#reset button {
  width: 100%;
} 
 <div id="calculator">
  <span id="number">0</span>
  
  <div>
    <button type="button" onclick="addChar('7')">7</button>
    <button type="button" onclick="addChar('8')">8</button>
    <button type="button" onclick="addChar('9')">9</button>
    <button type="button" onclick="chooseOperation('divide')">/</button>
  </div>
  
  <div>
    <button type="button" onclick="addChar('4')">4</button>
    <button type="button" onclick="addChar('5')">5</button>
    <button type="button" onclick="addChar('6')">6</button>
    <button type="button" onclick="chooseOperation('multiply')">*</button>
  </div>
  
  <div>
    <button type="button" onclick="addChar('1')">1</button>
    <button type="button" onclick="addChar('2')">2</button>
    <button type="button" onclick="addChar('3')">3</button>
    <button type="button" onclick="chooseOperation('subtract')">-</button>
  </div>
  
  <div>
    <button type="button" onclick="startCalculation()">=</button>
    <button type="button" onclick="addChar('0')">0</button>
    <button type="button" onclick="addChar('.')">.</button>
    <button type="button" onclick="chooseOperation('addNumber')"> </button>
  </div>
  
  <div id="reset">
    <button type="button" onclick="reset()">Reset</button>
  </div>
</div>

Комментарии:

1. чтобы сделать его расчетным, вы можете сделать document.getElementById('number').innerHTML = Number(document.getElementById('number').innerHTML) num;

2. он не добавляет его после последнего элемента -> он хочет написать число с более чем одной цифрой — пока ничего о вычислениях…

3. спасибо большое за ваши ответы !

4. @SirTristanus Я добавил пример с расчетом. Пожалуйста, оставьте отзыв…

5. это не то, что я собирался сделать, но это выглядит интересно, тай, за твою помощь

Ответ №2:

Он просто заменяет текущее значение innerHTML значением, которое вы нажали. Вы должны сохранить текущее значение document.getElementById('number').innerHTML в другой переменной и добавить свое новое num значение в эту переменную. Затем вы можете установить сумму в качестве нового значения innerHTML.

Ответ №3:

 <script>
//function for displaying values
function dis(val)
{
document.getElementById("edu").value =val
 }
//function for evaluation
function solve()
{
let x = document.getElementById("edu").value
let y = eval(x)
document.getElementById("edu").value = y
}
//function for clearing the display
function clr()
{
document.getElementById("edu").value = ""
}
</script>

<div class="title">Made by Yasin</div>
<table border="1">
<tbody><tr>
<td><input type="button" value="c" onclick="clr()"> </td>
<td colspan="3"><input type="text" id="edu"></td>
<!-- clr() function will call clr to clear all value -->
</tr>
<tr>
<!-- creating buttons and assigning values-->
<td><input type="button" value=" " onclick="dis(' ')"> </td>
<td><input type="button" value="1" onclick="dis('1')"> </td>
<td><input type="button" value="2" onclick="dis('2')"> </td>
<td><input type="button" value="3" onclick="dis('3')"> </td>
</tr>
<tr>
<td><input type="button" value="-" onclick="dis('-')"> </td>
<td><input type="button" value="4" onclick="dis('4')"> </td>
<td><input type="button" value="5" onclick="dis('5')"> </td>
<td><input type="button" value="6" onclick="dis('6')"> </td>
</tr>
<tr>
<td><input type="button" value="*" onclick="dis('*')"> </td>
<td><input type="button" value="7" onclick="dis('7')"> </td>
<td><input type="button" value="8" onclick="dis('8')"> </td>
<td><input type="button" value="9" onclick="dis('9')"> </td>
</tr>
<tr>
<td><input type="button" value="/" onclick="dis('/')"> </td>
<td><input type="button" value="." onclick="dis('.')"> </td>
<td><input type="button" value="0" onclick="dis('0')"> </td>
<!-- Evaluating function call eval()-->
<td><input type="button" value="=" onclick="solve()"> </td>
</tr>
</tbody></table>

<!-- for styling -->
<style>
.title{
border-radius: 20px;
margin-bottom: 20px;
text-align:center;
width: 210px;
color:#ff4456;
border: solid black 1px;
}
input[type="button"]
{
border-radius: 10px;
background-color:#ff4456;
color: black;
border-color:#ff4456 ;
width:100%;
}
input[type="text"]
{
border-radius: 10px;
text-align: right;
background-color:white;
border-color: black ;
width:100%
}
</style>
Метки: