2014-12-08 5 views
-3

Я пытаюсь сделать полностью базовый калькулятор с JavaScript и HTML. Я еще не закончил его, но ни одна из моих кнопок не работает.Базовый калькулятор JS/HTML

function NumberClicked(numValue) { 
 
\t //alert(numValue); 
 
\t document.getElementById("calcInput").value += numValue; 
 
} 
 

 
function ClearAll() { 
 
\t document.getElementById("calcInput").value = ''; 
 
\t document.getElementById("calcOutput").value = ''; 
 
} 
 

 
function Add() { 
 
\t var output = document.getElementById("calcOutput"); 
 
\t output.value = Number(document.getElementById("calcInput").value) + Number(output.value); 
 

 
\t document.getElementById("calcInput").value = ''; 
 
} 
 

 
function Subtract() { 
 
\t var output = document.getElementById("calcOutput"); 
 
\t output.value = Number(document.getElementById("calcInput").value) - Number(output.value); 
 

 
\t document.getElementById("calcInput").value = ''; 
 
} 
 

 
function Divide() { 
 
\t var output = document.getElementById("calcOutput"); 
 
\t if (output.value == "") { 
 
\t \t output.value = document.getElementById("calcInput"); 
 
\t } else { 
 
\t \t output.value = Number(output.value)/Number(document.getElementById("calcInput").value); 
 

 
\t } 
 
\t document.getElementById("calcInput").value = ''; 
 
} 
 

 
function Multiply() { 
 
\t //var 
 
}
result<input id="calcOutput" type="text"> 
 
<br> 
 
input<input id="calcInput" type="text"> 
 
<br> 
 
<button onclick="ClearAll();">clear</button> 
 
<br> 
 
<button onclick="NumberClicked(7);">7</button> 
 
<button onclick="NumberClicked(8);">8</button> 
 
<button onclick="NumberClicked(9);">9</button> 
 
<button onclick="Divide();">/</button> 
 
<br> 
 
<button onclick="NumberClicked(4);">4</button> 
 
<button onclick="NumberClicked(5);">5</button> 
 
<button onclick="NumberClicked(6);">6</button> 
 
<button onclick="Multiply();">*</button> 
 
<br> 
 
<button onclick="NumberClicked(1);">1</button> 
 
<button onclick="NumberClicked(2);">2</button> 
 
<button onclick="NumberClicked(3);">3</button> 
 
<button onclick="Subtract();">-</button> 
 
<br> 
 
<button onclick="NumberClicked(0);">0</button> 
 
<button onclick="Add();">+</button> 
 
<br>

Fiddle

+1

Я добавил скрипку демо на ваш вопрос. Вы можете видеть, что кнопки действительно работают. Пожалуйста, уточните свой вопрос, чтобы точно объяснить, в чем проблема. – isherwood

+2

@isherwood, не используйте JSFiddle здесь больше, вместо этого вы должны использовать фрагмент кода. –

+2

@PrestonS нет причин не использовать JSFiddle, фрагменты - это просто удобная вещь –

ответ

-1

function c(val) { 
 
    document.getElementById("d").value=val; 
 
} 
 

 
function math(val) { 
 
    document.getElementById("d").value+=val; 
 
} 
 

 
function e() { 
 
    try { 
 
     c(eval(document.getElementById("d").value)) 
 
    } 
 
    catch(e) { 
 
     c('error') 
 
    } 
 
}
<div class="box"> 
 
    <div class="display"><input type="text" readonly size="18" id="d"></div> 
 
    <div class="keys"> 
 
     <p> 
 
      <input type="button" class="button gray" value="mrc" onclick='c("not defined")'> 
 
      <input type="button" class="button gray" value="m-" onclick='c("not defined")'> 
 
      <input type="button" class="button gray" value="m+" onclick='c("not defined")'> 
 
      <input type="button" class="button pink" value="/" onclick='math("/")'> 
 
     </p> 
 
     <p> 
 
      <input type="button" class="button red" value="7" onclick='math("7")'> 
 
      <input type="button" class="button red" value="8" onclick='math("8")'> 
 
      <input type="button" class="button red" value="9" onclick='math("9")'> 
 
      <input type="button" class="button pink" value="*" onclick='math("*")'> 
 
     </p> 
 
     <p> 
 
      <input type="button" class="button red" value="4" onclick='math("4")'> 
 
      <input type="button" class="button red" value="5" onclick='math("5")'> 
 
      <input type="button" class="button red" value="6" onclick='math("6")'> 
 
      <input type="button" class="button pink" value="-" onclick='math("-")'> 
 
     </p> 
 
     <p> 
 
      <input type="button" class="button red" value="1" onclick='math("1")'> 
 
      <input type="button" class="button red" value="2" onclick='math("2")'> 
 
      <input type="button" class="button red" value="3" onclick='math("3")'> 
 
      <input type="button" class="button pink" value="+" onclick='math("+")'> 
 
     </p> 
 
     <p> 
 
      <input type="button" class="button red" value="0" onclick='math("0")'> 
 
      <input type="button" class="button red" value="." onclick='math(".")'> 
 
      <input type="button" class="button red" value="C" onclick='c("")'> 
 
      <input type="button" class="button orange" value="=" onclick='e()'> 
 
     </p> 
 
    </div> 
 
</div>

+0

Я почти ниспровернулся, потому что не было объяснений, просто кода. Я сделал это в виде исполняемого фрагмента, потому что мне было интересно узнать о результатах. Есть некоторые ошибки, но на самом деле это работает очень хорошо. Если вы можете исправить ошибки и добавить какое-то объяснение, почему это ответ, он будет достоин увеличения. – dave

Смежные вопросы