用HTML、CSS和JavaScript制作的计算器。我不知道哪里出了问题。

huangapple
go评论117阅读模式
英文:

Calculator with html, css and js. I have no idea what's wrong

问题

我理解你的情况，让我来看一下你的代码并尝试找出问题。

从你的代码来看，有一些地方可能会导致计算器工作不正常。首先，请检查以下几点：

  1. 确保你的HTML文件中正确引用了JavaScript文件。你的HTML文件中有一个script标签，但是文件名似乎有一个拼写错误。应该是 <script src="script.js"></script>，而不是 <script src="scrip.js"></script>。

  2. 在HTML中，你使用了一些HTML实体编码（如 &larr;、&times;、&plus; 等）。请确保这些编码都正确，以防止HTML渲染问题。

  3. 在JavaScript中，你使用了 handleMath 函数来处理加法、减法、乘法和除法，但在代码中检查操作符的时候，操作符应该是 '+'、'-'、'×' 和 '÷'，而不是 '+', '−', '×', '÷'。确保操作符的字符串值与你的switch语句中的情况匹配。

  4. 请确保你的事件监听器绑定正确，以确保在按钮被点击时 buttonClick 函数被正确调用。

检查这些问题，并尝试进行修复。如果问题仍然存在，请提供更多信息，以便我可以进一步帮助你诊断问题。

英文:

Followed a youtube tutorial, reviewed the code countless times and I don't know what's wrong. The calculator sometimes works, other times doesnt. Some buttons (+, -, x, ⁄) dont work. Here's the entire code cause I have no ideia where the problem might be. I started with html, css and then js, I think the problem must be in the js part

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let runningTotal = 0;
  2. let buffer = 0;
  3. let previousOperator;
  5. const screen = document.querySelector(&#39;.screen&#39;);
  7. function buttonClick(value){
  8.     if (isNaN(value)){
  9.         handleSymbol(value);       
  10.     }else{
  11.         handleNumber(value);
  12.     }
  13.     screen.innerText = buffer;
  14. }
  16. function handleSymbol(symbol){
  17.     switch(symbol){
  18.         case &quot;C&quot;:
  19.             buffer = &#39;0&#39;;
  20.             runningTotal = 0;
  21.             break;
  22.         case &#39;=&#39;:
  23.             if(previousOperator === null){
  24.                 return
  25.             }
  26.             flushOperation (parseInt(buffer));
  27.             previousOperator = null;
  28.             buffer = runningTotal;
  29.             runningTotal = 0;
  30.             break
  31.         case &#39;←&#39;:
  32.             if(buffer.length === 1){
  33.                 buffer = &#39;0&#39;;
  34.             }else{
  35.                 buffer = buffer.substring(0, buffer.length - 1);
  36.             }
  37.             break;
  38.         case &#39;+&#39;:
  39.         case &#39;−&#39;:
  40.         case &#39;&#215;&#39;:
  41.         case &#39;&#247;&#39;:
  42.             handleMath(symbol);
  43.             break;
  44.     }
  45. }
  47. function handleMath(symbol){
  48.     if(buffer === &#39;0&#39;){
  49.         return;
  50.     }
  52.     const intBuffer = parseInt(buffer);
  54.     if(runningTotal === &#39;0&#39;){
  55.         runningTotal = intBuffer
  56.     }else{
  57.         flushOperation(intBuffer);
  58.     }
  59.     previousOperator = symbol;
  60.     buffer = &#39;0&#39;;
  61. }
  63. function flushOperation(intBuffer){
  64.     if(previousOperator === &#39;+&#39;){
  65.         runningTotal += intBuffer;
  66.     }else if(previousOperator === &#39;−&#39;){
  67.         runningTotal -= intBuffer;
  68.     }else if(previousOperator === &#39;&#215;&#39;){
  69.         runningTotal *= intBuffer;
  70.     }else if(previousOperator === &#39;&#247;&#39;){
  71.         runningTotal /= intBuffer;
  72.     }
  73. }
  75. function handleNumber(numberString){
  76.     if(buffer === &#39;0&#39;){
  77.         buffer = numberString;
  78.     }else{
  79.         buffer += numberString;
  80.     }
  81. }
  83. function init(){
  84.     document.querySelector(&#39;.calc-buttons&#39;).addEventListener(&#39;click&#39;, function(event){
  85.         buttonClick(event.target.innerText);
  86.  })
  87. }
  89. init();

<!-- language: lang-css -->

  1. html{
  2.     box-sizing: border-box;
  3.     height: 100%;
  4. }
  6. *,
  7. *::before,
  8. *::after{
  9.     box-sizing: inherit;
  10.     margin: 0;
  11.     padding: 0;
  12. }
  13. body{
  14.     align-items: center;
  15.     background: linear-gradient(320deg, #eb92be, #ffef78, #63c9b4);
  16.     display: flex;
  17.     font-family: &#39;Dosis&#39;, sans-serif;
  18.     font-display: swap;
  19.     height: inherit;
  20.     justify-content: center;
  21. }
  23. .wrapper{
  24.    backdrop-filter: blur(5.5px);
  25.    -webkit-backdrop-filter: blur(55.5px);
  26.    border-radius: 16px; 
  27.    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
  28.    color: #232323;
  29.    backdrop-filter: blur(4px);
  30.    -webkit-backdrop-filter: blur(4px);
  31.    background: rgba(225, 225, 225, 0.30);
  32.    border: 1px solid rgba(225, 225, 225, 0.34);
  33.    flex-basis: 400px;
  34.    height: 540px;
  35.    padding: 20px 35px;
  36. }
  37. .screen{
  38.     backdrop-filter: blur(5.5px);
  39.     -webkit-backdrop-filter: blur(5.5px);
  40.     background:rgba(225, 225, 225, 0.75);
  41.     border: 1px solid rgba(225, 225, 225, 0.01);
  42.     border-radius: 16px;
  43.     box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
  44.     color: #232323;
  45.     font-size: 35px;
  46.     overflow: auto;
  47.     padding: 20px;
  48.     text-align: right;
  49.     width: 326px;
  50. }  
  52. .calc-button-row{
  53.     display: flex;
  54.     justify-content: space-between;
  55.     margin: 5% 0;
  56. }
  58. .calc-button{
  59.     backdrop-filter: blur(5.5px);
  60.     -webkit-backdrop-filter: blur(5.5px);
  61.     background: rgba(225, 225, 225, 0.75);
  62.     border: 1px solid rgba(255, 255, 255, 0.01);
  63.     border-radius: 16px;
  64.     box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
  65.     color: #232323;
  66.     flex-basis: 20%;
  67.     font-family: inherit;
  68.     font-size: 24px;
  69.     height: 65px;
  70. }
  72. .calc-button:last-child{
  73.     backdrop-filter: blur(5.5px);
  74.     -webkit-backdrop-filter: blur(5.5px);
  75.     background: rgba(225, 225, 225, 0.75);
  76.     border: 1px solid rgba(255, 255, 255, 0.01);
  77.     border-radius: 16px;
  78.     box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
  79.     color: #fff;
  80.     background: #d72880;
  81. }
  82. .calc-button:last-child:hover{
  83.     background-color: inherit;
  84.     color: inherit;
  85. }
  87. .calc-button:hover{
  88.     background-color: inherit;
  90. }
  92. .calc-button:active{
  93.     background-color: #ffef78;
  94. }
  96. .double{
  97.     flex-basis: 47%;
  98. }
  100. .triple{
  101.     flex-basis: 73%;
  102. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4.   &lt;meta charset=&quot;UTF-8&quot;&gt;
  5.   &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  6.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7.   &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  8.   &lt;title&gt;Calculator&lt;/title&gt;
  9. &lt;/head&gt;
  10. &lt;body&gt;
  12.     &lt;div class=&quot;wrapper&quot;&gt;
  13.       &lt;section class=&quot;screen&quot;&gt;
  14.         0
  15.       &lt;/section&gt;
  17.       &lt;section class=&quot;calc-buttons&quot;&gt;
  18.         &lt;div class=&quot;calc-button-row&quot;&gt;
  19.             &lt;button class=&quot;calc-button double&quot;&gt;
  20.               C
  21.             &lt;/button&gt;
  22.             &lt;button class=&quot;calc-button&quot;&gt;
  23.               &amp;larr;
  24.             &lt;/button&gt;
  25.             &lt;button class=&quot;calc-button&quot;&gt;
  26.               &amp;divide;
  27.             &lt;/button&gt;
  28.         &lt;/div&gt;
  29.         &lt;div class=&quot;calc-button-row&quot;&gt;
  30.             &lt;button class=&quot;calc-button&quot;&gt;
  31.               7
  32.             &lt;/button&gt;
  33.             &lt;button class=&quot;calc-button&quot;&gt;
  34.               8
  35.             &lt;/button&gt;
  36.             &lt;button class=&quot;calc-button&quot;&gt;
  37.               9
  38.             &lt;/button&gt;
  39.             &lt;button class=&quot;calc-button&quot;&gt;
  40.               &amp;times;
  41.             &lt;/button&gt;
  42.         &lt;/div&gt;
  43.         &lt;div class=&quot;calc-button-row&quot;&gt;
  44.             &lt;button class=&quot;calc-button&quot;&gt;
  45.               4
  46.             &lt;/button&gt;
  47.             &lt;button class=&quot;calc-button&quot;&gt;
  48.               5
  49.             &lt;/button&gt;
  50.             &lt;button class=&quot;calc-button&quot;&gt;
  51.               6
  52.             &lt;/button&gt;
  53.             &lt;button class=&quot;calc-button&quot;&gt;
  54.               &amp;minus;
  55.             &lt;/button&gt;
  56.         &lt;/div&gt;
  57.         &lt;div class=&quot;calc-button-row&quot;&gt;
  58.               &lt;button class=&quot;calc-button&quot;&gt;
  59.                 1
  60.               &lt;/button&gt;
  61.               &lt;button class=&quot;calc-button&quot;&gt;
  62.                 2
  63.               &lt;/button&gt;
  64.               &lt;button class=&quot;calc-button&quot;&gt;
  65.                 3
  66.               &lt;/button&gt;
  67.               &lt;button class=&quot;calc-button&quot;&gt;
  68.                 &amp;plus;
  69.               &lt;/button&gt;
  70.         &lt;/div&gt;
  72.         &lt;div class=&quot;calc-button-row&quot;&gt;
  73.               &lt;button class=&quot;calc-button triple&quot;&gt;
  74.                 0
  75.               &lt;/button&gt;
  76.               &lt;button class=&quot;calc-button&quot;&gt;
  77.                 &amp;equals;
  78.               &lt;/button&gt;
  79.               
  80.             &lt;/div&gt;
  81.       &lt;/section&gt;
  82.     &lt;/div&gt;
  85.   &lt;script src=&quot;scrip.js&quot;&gt;&lt;/script&gt;
  86.   
  87. &lt;/body&gt;
  88. &lt;/html&gt;

<!-- end snippet -->

I've reviewed the code word by word, can't find the problem

答案1

得分: 1

  1. 有一些问题我找到了：

  2. 有时缓冲区是数字，有时是字符串。所以在这一行中：

    buffer = buffer.substring(0, buffer.length - 1);

    你会遇到未捕获的类型错误，所以尽量将它转换为字符串：

    buffer = buffer.toString().substring(0, buffer.length - 1);

  3. 你试图检查 runningTotal 是否等于字符串 '0'，但它是一个数字。

    if (runningTotal === 0)

    你需要仔细检查所有变量的类型，因为现在有点混乱。

英文:

There are couple of issues I found:

  1. Sometimes buffer is number, sometimes - string. So in line:

buffer = buffer.substring(0, buffer.length - 1);

you have an Uncaught TypeError, so try always convert it to a string:

buffer = buffer.toString().substring(0, buffer.length - 1);

  1. You are trying to check that runningTotal equals string '0', but it is a number.

if (runningTotal === 0)

You need to carefully check the types of all variables because now it's a bit messy.

huangapple
  • 本文由 发表于 2023年5月21日 01:11:14
  • 转载请务必保留本文链接：https://go.coder-hub.com/76296440.html
  • calculator
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定