我的JavaScript计算器上的指数,百分比和平方根按钮都不起作用

时间:2017-11-10 21:26:32

标签: javascript html calculator

我无法得到指数,百分比,我的JavaScript网络应用程序上的平方根按钮都不适用于我的生活!编辑在分析时没有向我显示任何问题,所以我不知道问题是什么。你能看到我的代码中可能出现错误的地方吗?

这里'我的代码笔:https://codepen.io/IDCoder/full/zEBoOQ/

以下是HTML代码:

<DOCTYPE html>
<html>
    <head>
        <title>Ziontific Calculator</title>
    <meta name="viewport" content="initial-scale=1">
    </head>

    <body>
        <div class="container">
        <h1 id="heading">ZIONTIFIC CALCULATOR</h1>
        <div class="form holder">
           <form id="formone" name="calc">
          <input id="display" type="text" name="display" placeholder=".....get on board...." disabled contenteditable="false" >

             <!--input type="text" placeholder="ExampleDomain"-->

          <br>
          <input class="button number one" type="button" value="1" onClick="calc.display.value+=1">
          <input class="button number one" type="button" value="2" onClick="calc.display.value+=2">
          <input class="button number one" type="button" value="3" onClick="calc.display.value+=3">
          <input class="button three" type="button" value="C" onClick="Resetfunction(this.form)">
          <input class="button three" type="button" value="<-" onClick="backspace(this.form)">
          <input class="button three" type="button" value="=" onClick="evaluation(this.form)">

          <input class="button number one" type="button" value="4" onClick="calc.display.value+=4">
          <input class="button number one" type="button" value="5" onClick="calc.display.value+=5">
          <input class="button number one" type="button" value="6" onClick="calc.display.value+=6">
          <input class="button opps one" type="button" value="-" onClick="calc.display.value+='-'">
          <input class="button opps one" type="button" value="%" onClick="calc.display.value+='%'">
          <input class="button end one" type="button" value="cos" onClick="cos_function()">



          <input class="button number two" type="button" value="7" onClick="calc.display.value+=7">
          <input class="button number two" type="button" value="8" onClick="calc.display.value+=8">
          <input class="button number two" type="button" value="9" onClick="calc.display.value+=9">
          <input class="button opps two" type="button" value="*" onClick="calc.display.value+='*'">
          <input class="button n" type="button" value="n!" onClick="fact_function()">
          <input class="button sin"type="button" value="sin" onClick="sin_function()">

          <input class="button opps two" type="button" value="." onClick="calc.display.value+='.'">
          <input class="button number two" type="button" value="0" onClick="calc.display.value+=0">
          <input class="button opps two" type="button" value="," onClick="calc.display.value+=','">
          <input class="button opps two" type="button" value="+" onClick="calc.display.value+='+'">
          <input class="button opps two" type="button" value="/" onClick="calc.display.value+='/'">
          <input class="button end two" type="button" value="tan" onClick="tan_function()">

          <input class="button third row" type="button" value="E" onClick="calc.display.value+=2.718">
          <input class="button third row" type="button" value="pi" onClick="calc.display.value+=3.141">
          <input class="button third row" type="button" value="x^y" onClick="power_function()">
          <input class="button third row" type="button" value="(" onClick="openpara(this.value)">
          <input class="button third row" type="button" value=")" onClick="closepara(this.value)">
          <input class="button third row" type="button" value="log" onClick="log_function()">

          <input class="button third row" type="button" value="sqrt" onClick="sqrt_function()">
          <input class="button third row" type="button" value="LN2" onClick="calc.display.value+=0.693">
          <input class="button third row" type="button" value="LN10" onClick="calc.display.value+=2.302">
          <input class="button third row" type="button" value="log2E" onClick="calc.display.value+=1.442">
          <input class="button third row" type="button" value="log10E" onClick="calc.display.value+=0.434">
          <input class="button third row" type="button" value="EXP" onClick="exp_function">

          </form>

            </div>
        </div>
    </body>
</html>

以下是CSS代码:

{{ 2}}

以下是JavaScript代码:

body{
  text-align: center;
  background-color;
}


h1{
color: white;
}


    .container{
        background-image:   url(https://s26.postimg.org/frq6u3odl/texture-seamless-wood-3.jpg);
        position: relative;
        max-width: 550px;
    padding: 10px;
        height: auto;
        margin: auto;
        top: 0;
        border: 0;
}
.form.holder{
  max-width:500px;
  height:auto;
  margin: auto;
  padding-bottom: 0;
  background-color:black;
  text-align:center;
  border-radius:10px;
  border:2px groove #333;
  box-shadow:4px 4px 2px #666666;
  overflow: hidden;
}

 #formone{
    padding-top:35px;
    padding-bottom: 10px;
}  

input, textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

input{
  display: inline
    font-size: 30px;
}

#display{ 
  height:60px;
  width:84.5%;
  color: blue;
  margin:3px;
  border:2px inset black;
  border-bottom:2px inset #FFF;
  border-right:2px inset #FFF;
  border-radius: 5px;
  background-color:#c6c6c4;
  font-size: 1.75em;
}


.button.end.one,.button.number.one,.button.three,.button.opps.one,.button.number.two,.button.opps.two,.button.n, .button.sin,.button.end.two,.button.third.row {
font-size: 20px;
transition: all 0.5s ease-in-out;
cursor: pointer;
border-radius: 5px;
border: none;
color: white;
width:12.5%;
height:60px;
margin: 3px;
}


.button.end.one{
  background-color: #4CAF50;
}


.button.number.one{
  background-color: #4CAF50;
}


.button.three{
background-color: #4CAF50;
}


.button.opps.one{
  background-color: #4CAF50;
  }


/*
.button.number.two{
  background-color: #ffff00;
}


.button.opps.two{
  background-color: #ffff00;
}

.button.n{
  background-color: #ffff00;
}

.button.sin{
  background-color: #ffff00;
}

.button.end.two{
  background-color: #ffff00;
}
*/


.button.end.two, .button.sin, .button.n, .button.opps.two, .button.number.two {
  background-color: #ffff00;
  color: white;
  text-shadow: 0 0 1px black;
}



.button.third.row{
  background-color: #ef1a07;
}



@media only screen and (max-width: 450px) {
 #heading{
  font-size: 20px !important;
 } 
} 


@media only screen and (max-width: 450px) {
 .button.end.one,.button.number.one,.button.three,.button.opps.one,.button.number.two,.button.opps.two,.button.n, .button.sin,.button.end.two,.button.third.row{
font-size: 12px;
  }
}

@media only screen and (max-width: 300px) {
 .button.end.one,.button.number.one,.button.three,.button.opps.one,.button.number.two,.button.opps.two,.button.n, .button.sin,.button.end.two,.button.third.row{
font-size: 9px;
  }
}



@media only screen and (max-width: 450px) {  .button.end.one,.button.number.one,.button.three,.button.opps.one,.button.number.two,.button.opps.two,.button.n, .button.sin,.button.end.two,.button.third.row{
  width:12%;
  height:50px;
  }
}


@media only screen and (max-width: 302px) {
   #heading{
  font-size: 15px !important;
 } 
}



@media only screen and (max-width: 302px) {
  .form.holder{
  height: 450px;
  }
}


@media only screen and (max-width: 302px) {  .button.end.one,.button.number.one,.button.three,.button.opps.one,.button.number.two,.button.opps.two,.button.n, .button.sin,.button.end.two,.button.third.row{
  width:12%;
  height:30px;
  }
}


@media only screen and (max-width: 302px) {
  .form.holder{
  height: 325px;
  }
}

1 个答案:

答案 0 :(得分:0)

对于sqrt函数,缺少值:

function sqrt_function() {
    flag += 1;
    calc.display.value = Math.sqrt(calc.display.value);
}

对于百分比,它是javascript中的模数,我尝试了6%5,其中1为您的工具,这很好。 如果你想要百分比,你只需要除以100。

calc.display.value = calc.display.value / 100;

对于你的日志,你要连接值,我认为这是错误的:

calc.display.value+=1.442

对于你的指数,缺少()

<input class="button third row" type="button" value="EXP" onClick="exp_function()">

我猜这将有效

function exp_function() {
    flag += 1;
    calc.display.value = Math.exp(calc.display.value);
}

如果有帮助,请告诉我。