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

Question

I cannot get the exponent, percentage, neither the square root buttons on my JavaScript web app to work for the life of me! 我无法获得JavaScript网络应用程序上的指数，百分比和平方根按钮，因此无法终身受益！ The editor isn't showing me any problems when analyzed, so I don't know what the problem is.Can you see where there could be errors in my code? 分析时，编辑器没有显示任何问题，所以我不知道问题出在哪里，您能看到我的代码中哪里可能有错误吗？

Here's my code pen: https://codepen.io/IDCoder/full/zEBoOQ/ 这是我的密码笔： https : //codepen.io/IDCoder/full/zEBoOQ/

Here's the HTML code: 这是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>

Here is the CSS code: 这是CSS代码：

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;
  }
}

Here is the JavaScript code: 这是JavaScript代码：

flag = 0;

function openpara(val) {
    calc.display.value += val;
    flag += 1;
}

function closepara(valval) {
    calc.display.value += valval;
    flag -= 1;
}

function backspace(calc) {
    var size = calc.display.value.length;
    calc.display.value = calc.display.value.substring(0, size - 1);
}

function Resetfunction(calc) {
    calc.display.value = "";

    flag = 0;
}

function cos_function() {
    flag += 1;
    calc.display.value += Math.cos();
}

function sin_function() {
    flag += 1;
    calc.display.value += Math.sin();
}

function tan_function() {
    flag += 1;
    calc.display.value += Math.tan();
}

function log_function() {
    flag += 1;
    calc.display.value += Math.log();
}

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

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

function fact(x) {
    factvar = 1;
    for (i = 1; i <= x; i++) {
        factvar = factvar * i;
    }
    return factvar;
}

function fact_function(x) {
    flag += 1;
    calc.display.value += 'fact(';
}

function power_function(x) {
    flag += 1;
    calc.display.value += Math.pow(x,y);
}

function evaluation(calc) {
    n = calc.display.value;
    var size = calc.display.value.length;
    var lastchar = calc.display.value.charAt(size)
    if (isNaN(lastchar) && lastchar != ")" && lastchar != "!") {
        calc.display.value = "syntax error";
    } else if (flag != 0) {
        calc.display.value = "error:paranthesis";
    } else {
        result = eval(n);
        calc.display.value = result;
    }
}

Answer 1

For you sqrt function, the value is missing : 对于您的sqrt函数，该值缺失：

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

For the percentage, it is the modulo in javascript, and I tried 6%5 which gives 1 with your tool, that's good. 对于百分比，这是javascript中的模数，我尝试了6％5，它与您的工具一起给出1，这很好。 If you want the percent, you just have to divide by 100. 如果需要百分比，则只需除以100。

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

For you log, you concat the value, which is wrong I think : 对于您的日志，您确定了该值，我认为这是错误的：

calc.display.value+=1.442

For your exponent, the () are missing 对于您的指数，（）丢失了

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

And I guess this will be working 我想这会起作用

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

Let me know if that helps. 让我知道是否有帮助。

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

问题描述

1 个解决方案

解决方案1
0 2017-11-10 21:40:12

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

问题描述

1 个解决方案

解决方案1 0 2017-11-10 21:40:12

解决方案1
0 2017-11-10 21:40:12