javascript - 是否有验证器来检查运算符是否已被使用？

Question

我试图在 JS 中找到一个验证器来检查是否使用了运算符(我们正在制作一个简单的计算器)所以我尝试制作一个函数 checkOperator()，但这是一个死胡同，当我使用它时，它什么也没做。

function checkOperator(){
     var operation = document.getElementsByClassName("operator");
     var string = document.getElementsByName('show');
     var lastChar = string.charAt(string.length-1);
 
     if(lastChar === operation){
         var restring =string.replace(operation,operation);
         return restring;
     }
}

    <div id="cursor" class="rekenmachine">
          <form name="rekenmachine">     
            <div>
              <input id="cursor" type="text" name="show" value="">
              <input id="cursor" type="button" name="Clear" value="C" onclick="rekenmachine.show.value =''">
            </div>
            <div class="input">
              <input id="cursor" type="button" value="7" onclick="rekenmachine.show.value +='7'">
              <input id="cursor" type="button" value="8" onclick="rekenmachine.show.value +='8'">
              <input id="cursor" type="button" value="9" onclick="rekenmachine.show.value +='9'">
              <input id="cursor" type="button" class="operator" value="/" onclick="rekenmachine.show.value +='/'">
            </div>
         </form>
    </div>

我预计只能 Put 一个运算符，因为如果多个运算符彼此相邻，则 Eval 无法计算字符串。

Answer 1

代码中的主要问题是您需要使用 value(和 [0])来访问 的(第一个)元素的实际文本getElementsByName 或 getElementsByClassName。参见 How do I get the value of text input field using JavaScript? .

(我建议使用 id 和 getElementById() 来获取唯一元素，避免必须使用 [0])

此外，我认为使用“string”作为标识符不是一个好主意。

function checkOperator(){
     var elementShow = document.getElementsByName('show')[0];
     var text = elementShow.value;
     var lastChar = text.charAt(text.length-1);
 
     if(lastChar !== '/'){
         elementShow.value = text + '/'
     }
}

<div id="cursor" class="rekenmachine">
          <form name="rekenmachine">     
            <div>
              <input id="cursor" type="text" name="show" value="">
              <input id="cursor" type="button" name="Clear" value="C" onclick="rekenmachine.show.value =''">
            </div>
            <div class="input">
              <input id="cursor" type="button" value="7" onclick="rekenmachine.show.value +='7'">
              <input id="cursor" type="button" value="8" onclick="rekenmachine.show.value +='8'">
              <input id="cursor" type="button" value="9" onclick="rekenmachine.show.value +='9'">
              <input id="cursor" type="button" class="operator" value="/" onclick="checkOperator()">
            </div>
         </form>
    </div>

备注:

我通过在此处明确使用“/”来简化逻辑。

您可以使用 document.getElementsByClassName("operator")[0].value; 获取运算符，但是如果您有多个运算符，逻辑会比这复杂一点。 (因为您不只是想测试相同运算符的重复，所以您不能使用 +-/ 就像不能使用 // 一样。

但这将是另一个问题；)