问题遇到的现象和发生背景
用javascript写一个计算器，现在想让输入的第一个值不能为乘号，除号，取余号，但是可以为加号和减号。
问题相关代码，请勿粘贴截图
在这个函数中
<!-- 下面是CSS样式 -->
<style>
.top{
width: 465px;
height: 60px;
margin: auto;
background-color: gray;
margin-top: 100px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.point-red{
width: 20px;
height: 20px;
background-color: red;
float: left; /*浮动，可以让其不独占一行*/
margin-left: 20px;
margin-top: 20px;
border-radius: 50%;/* 通过这个指令将正方形改为一个圆 */
}
.point-blue{
width: 20px;
height: 20px;
background-color: blue;
float: left; /*浮动，可以让其不独占一行*/
margin-left: 20px;
margin-top: 20px;
border-radius: 50%;/* 通过这个指令将正方形改为一个圆 */
}
.point-green{
width: 20px;
height: 20px;
background-color: green;
float: left; /*浮动，可以让其不独占一行*/
margin-left: 20px;
margin-top: 20px;
border-radius: 50%;/* 通过这个指令将正方形改为一个圆 */
}
#counter{
font-size: 25px;
color: white;
float: right;
line-height: 60px;
margin-right: 35px;
}
/* 设置显示结果和计算过程的部分 */
#result{
width: 451px;
height: 55px;
border: 2px solid brown;
margin: auto;
text-align: right;
font-size: 30px;
padding-right: 10px;
padding-top: 5px;
}
/* 设置按钮区域的样式 */
.button{
width: 465px;
height: 413px;
background-color:gray;
margin: auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.button div{
width: 110px;
height: 80px;
float: left;
background-color:aquamarine;
border: 1px gray solid;
margin-left: 3.3px;
text-align: center;
font-size: 25px;
line-height: 80px;
font-weight: bold;
}
/* 使用伪类，可以产生一个鼠标悬停的效果 */
.button div:hover{
background-color: bisque;
/* 鼠标放在上面有放大的效果 */
font-size: 28px;
}
</style>
<!-- 下面是JavaScript代码 -->
<script type="text/javascript">
//解释：在你点击了7那个按钮，就会调用这个函数，定义一个result变量，将整个文件中的class名字为
//result的值赋给result这个变量，然后再把7赋给result。
//innerHTML获取HTML当前标签的起始和结束里面的内容
//给函数传递参数（number），用于输入哪一个数字
function clicknumber(number){
var result = document.getElementById("result");
//前面那个数加上后面你输入的数（不是相加成和，而是相加为一前一后，就是输入7和8，变成78
//innerHTML提取出来的是字符串，所以会变成输入的数字变成连接而不是相加
result.innerHTML += number; //这里的result是前面那个变量名，给变量名赋值为7
}
// 输入运算符
function clickoperator(operator){
var result = document.getElementById("result");
var string = result.innerHTML;
var len = string.length; //用len变量获取string长度
var last = string[len-1]; //last变量是字符串的最后一个字符
if(last == "+" || last =="-" || last == "*" || last == "/" || last == "%"){
//下面的代码是从string的数组下标为0开始往后获取len-1个长度，然后最后一位用新输入的那个运算符代替
var temp = string.substr(0,len-1) + operator; //substr(x,y)，x是数组开始的下标，y是往后获取y个
result.innerHTML = temp;
}
else{
result.innerHTML += operator; //如果不是字符那就正常执行
}
}
// 计算结果
//思路，先找到ID名为result的元素赋给result这个变量，然后用innerhtml将元素获取给到中间变量expression
//最后将结果赋给变量result，我认为最后的innerHTML是替换的作用。
function docalc(){
var result = document.getElementById("result");
var expression = result.innerHTML;
result.innerHTML = eval(expression);
}
// 清空
function doclear(){
var result = document.getElementById("result");
result.innerHTML = " "; //给这个结果赋空值
//或者可以这么写
//document.getElementById("result").innerHTML = " ";
//最简单的理解，就是将原来里面的东西替换成了空。因为innerhtml有获取的作用也有替换的作用
//可能有疑问为什么有时候innerhtml放在document那一句的后面，有时候是放在下一行的
//innerhtml放在哪一行就是获取这一行的标签的里面的元素的
}
// 删除，退格,回退删除最后一个字符
// 要利用数组，在计算器中12345分别的是第01234位
function doback(){
var result = document.getElementById("result");
var len = result.innerHTML.length;//取长度，这个字符串有多少位的长度
// substr(x,y)里面有两个参数，x是从数组的第几位开始，y是往后取多少位。（0,5）意思就是从第一个开始取，一直取五个数字
result.innerHTML = result.innerHTML.substr(0,len-1);
}
//获取字符串最后一个字符，如果是一个运算符，你还想输入一个运算法，那就把这个运算符替换了
function getlastchar(){
var result = document.getElementById("result");
var string = result.innerHTML;
var len = string.length;
var last = string[len-1];
if(last == "+" || last =="-" || last == "*" || last == "/" || last == "%"){
}
}
// 这个函数是模仿了运算符来写的
function clickpoint(point){
var result = document.getElementById("result");
var string = result.innerHTML;
var len = string.length;
var last = string[len-1];
if(last == "."){
last = string.substr(0,len-1) + point;
result.innerHTML = last;
}
else{
result.innerHTML += point;
}
}
</script>
<!-- onload元素事件：页面加载完成后则自动执行 -->
<body onload="countertitle()">
<div class="top"> <!-- 这是最上面那个灰色的 -->
<div class="point-red"></div>
<div class="point-blue"></div>
<div class="point-green"></div>
<div id="counter">计算器</div>
</div>
<!-- 显示计算结果和计算过程 -->
<div id="result"></div>
<!-- <div name="result">123456</div> 这个没有直接的用处，是为了验证一个命令来写的 -->
<!-- 设置按钮区域 -->
<div class="button">
<!-- 当元素被单击时，调用countertitle()这个函数，不一定是弹窗啊，只是这个函数正好是弹窗 -->
<div onclick="doclear()">AC</div><!--清空-->
<!--%是一个字符串，所以不能直接写入括号，要用引号包起来，但是外面有双引号了，所以要用单引号-->
<div >+/-</div>
<div onclick="clickoperator('%')">%</div>
<div onclick="clickoperator('/')">÷</div>
<div onclick="clicknumber(1)">1</div>
<div onclick="clicknumber(2)">2</div>
<div onclick="clicknumber(3)">3</div>
<div onclick="clickoperator('*')">*</div>
<div onclick="clicknumber(4)">4</div>
<div onclick="clicknumber(5)">5</div>
<div onclick="clicknumber(6)">6</div>
<div onclick="clickoperator('-')">-</div>
<div onclick="clicknumber(7)">7</div>
<div onclick="clicknumber(8)">8</div>
<div onclick="clicknumber(9)">9</div>
<div onclick="clickoperator('+')">+</div>
<div onclick="clicknumber(0)">0</div>
<!-- 双击时，调用countertitle()这个函数 -->
<div onclick="doback()">删除</div>
<div onclick="clickpoint('.')">.</div>
<div onclick="docalc()">=</div>
</div>
</body>
</html>
运行结果及报错内容
没有报错，但是想尽量完善这个计算器
我的解答思路和尝试过的方法
刚开始想在输入数值的函数中进行一个过滤，只要第一个输入不为数值那就不能输出，但是如果这样那加和减也会被过滤掉，于是我选择在运算符的函数中过滤，只要第一个输入为乘除取余就取空值，但是不知道怎么取到第一个值。因为我的代码是将显示的结果里的值全部提出。
我想要达到的结果
让输入的第一个值不能为乘号，除号，取余号，但是可以为加号和减号。
