堆栈内存溢出
  简体   繁体   English

如何使用 javascript 在我的计算器上设置清除按钮

[英]How to have clear button on my calculator using javascript

 原文  2021-06-07 14:44:59  8   3    javascript/ html

问题描述

I am kind of having trouble on making my clear function works on my calculator我很难在我的计算器上弄清 function

This is my HTML:这是我的 HTML：

<input type="button" id="result" value="C" onClick="clr()">
<input type="button" name="greater" value="<" onClick="calcNumbers(greater.value)">
<input type="button" name="divb" value="/" onClick="calcNumbers(divb.value)">
<input type="button" name="mulb" value="*" onClick="calcNumbers(mulb.value)">

and this is my JavaScript这是我的 JavaScript

function calcNumbers(result) {
  form.displayResult.value = form.displayResult.value + result;
}

3 个解决方案

解决方案1
 0  2021-06-07 14:54:48

Wrap all the input fields inside form tag or div tag and give id to that tag, ... and in script tag add function and rest it as document.getElementById("myForm").reset();将所有输入字段包装在表单标记或 div 标记中，并为该标记提供 id，...并在脚本标记中添加 function 和 rest 它作为 document.getElementById("myForm").reset();

解决方案2
 0  2021-06-07 14:59:09

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">

    function Add() {
        var x, y, txtResult;
        x = document.getElementById('txtFirst').value;
        y = document.getElementById('txtSecond').value;
        if (x == " " || y == "") {
            alert("Please enter FirstValue and SecondValue");
        }
       else{
        var txtResult = +x + +y;
        document.getElementById('txtResult').innerHTML = "Result: " + txtResult;
        }
    }

    function Sub() {
        var x, y, txtResult;
        x = document.getElementById('txtFirst').value;
        y = document.getElementById('txtSecond').value;
        if (x == " " || y == "") {
            alert("Please enter FirstValue and SecondValue");
        } else {
            var txtResult = +x - +y;
            document.getElementById('txtResult').innerHTML = "Result: " + txtResult;
        }
    }
    function Mul() {
        var x, y, txtResult;
        x = document.getElementById('txtFirst').value;
        y = document.getElementById('txtSecond').value;
        if (x == " " || y == "") {
            alert("Please enter FirstValue and SecondValue");
        } else {
            var txtResult = +x * +y;
            document.getElementById('txtResult').innerHTML = "Result: " + txtResult;
        }
    }

    function Div() {
        var x, y, txtResult;
        x = document.getElementById('txtFirst').value;
        y = document.getElementById('txtSecond').value;
         if (x == " " || y == "") {
            alert("Please enter FirstValue and SecondValue");
             } 
        else if (y != 0) {
            var txtResult = +x / +y;
              } 
        else {
            alert("Second Number Should not be Zero");
                }
        document.getElementById('txtResult').innerHTML = "Result: " + txtResult;
      }

    function Clear() {
        document.getElementById('txtFirst').value = "";
        document.getElementById('txtSecond').value = "";
        document.getElementById('txtResult').value = "";

    }


</script>
</head>
<body>
<form id="form1" runat="server">
<div>
    <label> FirstNumber :</label><br />
    <input id="txtFirst" type="text" /><br />
    <label> Second Number :</label><br />
    <input id="txtSecond" type="text" /><br />
    <label id="txtResult"></label><br />
    <input id="btnAdd" type="button" value="ADD" onclick="Add()"/>
    <input id="btnSub" type="button" value="SUB"  onclick="Sub()"/><br />
    <input id="btnMul" type="button" value="MUL" onclick="Mul()"/>
    <input id="btnDiv" type="button" value="DIV" onclick="Div()"/>
   <input id="btnClear" type="button" value="Clear" onclick="Clear()"/>


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

Calculator image计算器图像

解决方案3
 0  2021-06-07 15:58:13

You can clear the text by setting the value to an empty string.您可以通过将值设置为空字符串来清除文本。 

 const form = document.querySelector('.calculator > form'); const handleMemoryClear = (v) => { const disp = form.querySelector('.display'); disp.value = ''; }; const handleMemoryRecall = (v) => console.log('Implement MEMORY_RECALL'); const handleMemoryAdd = (v) => console.log('Implement MEMORY_ADD'); const handleMemoryRemove = (v) => console.log('Implement MEMORY_REMOVE'); const handleOpAdd = (v) => console.log('Implement OP_ADD'); const handleOpSub = (v) => console.log('Implement OP_SUB'); const handleOpMul = (v) => console.log('Implement OP_MUL'); const handleOpDiv = (v) => console.log('Implement OP_DIV'); const handleOpEval = (v) => console.log('Implement OP_EVAL'); const handleTypeIn = (v) => { const disp = form.querySelector('.display'); disp.value += v; }; const handleTypeOp = (v) => { switch (v) { case '+': return handleOpAdd(); case '-': return handleOpSub(); case '×': return handleOpMul(); case '÷': return handleOpDiv(); case '=': return handleOpEval(); } } const handleTypeFn = (v) => { switch (v) { case 'MC': return handleMemoryClear(); case 'MR': return handleMemoryRecall(); case 'M+': return handleMemoryAdd(); case 'M-': return handleMemoryRemove(); } } const handleButtonPress = (button, type) => { switch (type) { case 'in': return handleTypeIn(button.textContent); case 'op': return handleTypeOp(button.textContent); case 'fn': return handleTypeFn(button.textContent); } }; const ignoreSubmission = e => e.preventDefault(); const handleFormInput = e => { if (e.target instanceof HTMLButtonElement && e.target.dataset.type) { handleButtonPress(e.target, e.target.dataset.type); } }; form.addEventListener('submit', ignoreSubmission); form.addEventListener('click', handleFormInput);
 :root { --root-bg: #222; --root-fg: #EEE; --calc-bg: #444; --calc-border: #888; --calc-disp-bg: #333; --calc-disp-fg: #EEE; --calc-btn-bg: #444; --calc-btn-fg: #EEE; --calc-btn-hover-bg: #888; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; align-items: center; justify-content: center; background: var(--root-bg); color: var(--root-fg); }.calculator { display: flex; padding: 0.25em; background: var(--calc-bg); border: thin solid var(--calc-border); align-items: center; }.calc-input { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0.25em; }.calc-input >.display { grid-column-start: 1; grid-column-end: 5; grid-row-start: 1; grid-row-end: 1; font-size: 1.5em; background: var(--calc-disp-bg); border: thin solid var(--calc-border); color: var(--calc-disp-fg); font-family: monospace; text-align: right; padding: 0.25em; }.calc-key { display: flex; align-items: center; justify-content: center; font-size: 1.125em; font-weight: bold; border: thin solid var(--calc-border); background: var(--calc-btn-bg); color: var(--calc-btn-fg); padding: 0.25em 0; cursor: pointer; }.calc-key:hover { cursor: pointer; background: var(--calc-btn-hover-bg); }.calc-key[data-type="fn"] { background: #06D; }.calc-key[data-type="fn"]:hover { background: #08F; }.calc-key[data-type="op"] { background: #D60; }.calc-key[data-type="op"]:hover { background: #F80; }
 <div class="calculator"> <form class="calc-input"> <input type="text" class="display" placeholder="0" /> <button class="calc-key" data-type="fn">MC</button> <button class="calc-key" data-type="fn">M+</button> <button class="calc-key" data-type="fn">M-</button> <button class="calc-key" data-type="fn">MR</button> <button class="calc-key" data-type="in">7</button> <button class="calc-key" data-type="in">8</button> <button class="calc-key" data-type="in">9</button> <button class="calc-key" data-type="op">÷</button> <button class="calc-key" data-type="in">4</button> <button class="calc-key" data-type="in">5</button> <button class="calc-key" data-type="in">6</button> <button class="calc-key" data-type="op">×</button> <button class="calc-key" data-type="in">1</button> <button class="calc-key" data-type="in">2</button> <button class="calc-key" data-type="in">3</button> <button class="calc-key" data-type="op">-</button> <button class="calc-key" data-type="in">0</button> <button class="calc-key" data-type="in">.</button> <button class="calc-key" data-type="op">=</button> <button class="calc-key" data-type="op">+</button> </form> </div>

暂无
暂无

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

相关问题 清除按钮的JavaScript计算器问题 - JavaScript Calculator issue with clear button 为什么清除按钮在我的 Javascript 计算器中不起作用？ - Why Clear Button doens't work in my Javascript Calculator? 为 javascript 计算器创建清晰的按钮代码 - Creating a clear button code for a javascript calculator 如何使用清除按钮“清除”我的计时器？ - How do I "clear" my timer using my clear button? 计算器清除按钮 - Calculator clear button 如何使用Java清除后退按钮历史记录？ - How to clear back button history using Javascript? 使用javascript刷新我的html页面时如何清除按钮点击？ - How to clear button clicks when using javascript to refresh my html page? Javascript计算器，输入新数字时如何清除以前的数字？ - Javascript calculator, how to clear previous number when entering new number? 使用 javascript 在我的网站上创建一个 bmi 计算器 - To create a bmi calculator on my website using javascript 如何清除Javascript中的单选按钮？ - How to clear radio button in Javascript?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM