简体   繁体   English

转换为字符串的数组用于转换为数字,但不起作用

[英]Array converted into a string is used to be converted into a number but does not work

I am building a calculator with HTML, CSS and and pure JavaScript. 我正在使用HTML,CSS和纯JavaScript构建计算器。 I tried to do it just with little information, but I cannot understand what is happening now. 我尝试只用很少的信息就做到了,但是我不明白现在正在发生什么。 Since a person type many digits (ie 456) to create a number and then click on the operator, I decided to create an array(arrayInput) that will hold the numbers 4,5,6 and even the character "." 由于一个人键入许多数字(即456)来创建一个数字,然后单击运算符,所以我决定创建一个将容纳数字4,5,6甚至是字符“”的array(arrayInput)。 So for instance 4.56 in the array appears as 4,.,5,6 so I removed the characters and then the whitespaces. 例如,数组中的4.56显示为4,。,5,6,因此我删除了字符,然后删除了空格。 Finally since it is now a string "4.56" I used Number() function to convert it to number. 最后,由于它现在是字符串“ 4.56”,因此我使用了Number()函数将其转换为数字。 I also used parseInt, parseFloat, but it only displays the first time and when an operator is selected, then it does not calculate the total, but remains with the total zero. 我还使用了parseInt,parseFloat,但是它只显示第一次,当选择了一个运算符时,它不会计算总数,而是保持总数为零。 I will appreciate your support. 感谢您的支持。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <style type='text/css'>
    .row{
    height: 2em;
    width: 25%;
    border: 0.05em solid black;
    float:left;
    font-size: 2em;
    font-style: sans-serif;
    text-align:center;
    padding:0;
}
#screen{
    height: 4em;
    width: 100%;
    border: 0.03em solid black;
    float:left;
    font-size: 3em;
    font-style: sans-serif;
    text-align:right;
    margin:0;
    padding:0;

}


  </style>



<script type='text/javascript'>

var total=0;  //which will replace the number1 in parameters
var numberArray=[];
var operator="plus";  //by default i give it an addition
var number=0;
//get digits from buttons to create the number you want to use

var performOperator=function (tot,num,ope){
        if(ope==="plus")
            {
            tot+=num;
            num=0;
            document.getElementById("screen").innerHTML = tot;  //display a number of total HOPEFULLY
            }
        else if(ope==="-")
            {
            tot-=num;
            num=0;
            document.getElementById("screen").innerHTML = tot;  //display a number of total HOPEFULLY
            }

        else if(ope==="multiply")
            {
            tot*=num;
            num=0;
            document.getElementById("screen").innerHTML = tot;  //display a number of total HOPEFULLY
            }
        else if(ope==="/")
            {
            tot/=num;
            num=0;
            document.getElementById("screen").innerHTML = tot;  //display a number of total HOPEFULLY
            }
        else if(ope==="equal")
            {
            document.getElementById("screen").innerHTML = tot;  //display a number of last total HOPEFULLY
            num=0;
            }
        else if(ope==="clear")
            {
            tot=0;
            num=0;
            document.getElementById("screen").innerHTML = tot;  //display a number of total HOPEFULLY
            }
    }


function getDigit(elemId){


    var digitEntry=document.getElementById(elemId).value; //digit value goes to "val"
    numberArray.push(digitEntry); //each val should go to push into an array
    var numberWithSpace=numberArray.join(' '); //convert the array into a string block with spaces
    var numberNoSpace=numberWithSpace.replace(/\s/g, '');  //string number with no space
    number=Number(numberNoSpace);// it should be converter into a number here but does not look like..
    document.getElementById("screen").innerHTML = number;  //probably displays array of Number as STRING 

}

function highlightSign(elemId){

    var sign=document.getElementById(elemId).value; //digit value goes to "sign""
    operator=sign;
    performOperator(total,number,operator); //Call the performOperator function and creates new total and new number 0
    numberArray=[]; //once the number is created as real number then the array used to built it clears
}



</script>


</head>
<body>
  <body>

    <p id="screen"></p>

    <button id="nC" class="row" value=""></button>
    <button id="pmSign" class="row" value=""></button>
    <button id="nPercentage" class="row" value=""></button>
    <button id="divide" class="row" value="/" onclick="highlightSign(this.id)">/</button>
    <button id="n7" class="row" value=7 onclick="getDigit(this.id)">7</button>
    <button id="n8" class="row" value=8 onclick="getDigit(this.id)">8</button>
    <button id="n9" class="row" value=9 onclick="getDigit(this.id)">9</button>
    <button id="opX" class="row" value="multiply" onclick="highlightSign(this.id)">x</button>
    <button id="n4" class="row" value=4 onclick="getDigit(this.id)">4</button>
    <button id="n5" class="row" value=5 onclick="getDigit(this.id)">5</button>
    <button id="n6" class="row" value=6 onclick="getDigit(this.id)">6</button>
    <button id="minus" class="row" value="-" onclick="highlightSign(this.id)">-</button>
    <button id="n1" class="row" value=1 onclick="getDigit(this.id)">1</button>
    <button id="n2" class="row" value=2 onclick="getDigit(this.id)">2</button>
    <button id="n3" class="row" value=3 onclick="getDigit(this.id)">3</button>
    <button id="plus" class="row" value="plus" onclick="highlightSign(this.id)">+</button>
    <button id="n0" class="row" value=0 onclick="getDigit(this.id)">0</button>
    <button id="clear" class="row" value="clear" onclick="highlightSign(this.id)">clear</button>
    <button id="decPoint" class="row" value="." onclick="getDigit(this.id)">.</button>
    <button id="equal" class="row" value="equal" onclick="highlightSign(this.id)">=</button>
</body>

</body>


</html>

I made your total work here. 我在这里完成了您的全部工作。 But you need to change the logic of your calculator. 但是您需要更改计算器的逻辑。 There's a lot to change there 那里有很多改变

http://jsfiddle.net/g6gj1kr6/9/ http://jsfiddle.net/g6gj1kr6/9/

Don't pass your total as parameter just make it global, then you can rewrite it. 不要将合计值作为全局参数传递,则可以重写它。

var tot=0;

Anyway, there is a lot of work to do for your calculator 无论如何,您的计算器有很多工作要做

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM