2023年5月21日 01:11:14go评论88阅读模式

英文:

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

问题

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

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

确保你的HTML文件中正确引用了JavaScript文件。你的HTML文件中有一个script标签，但是文件名似乎有一个拼写错误。应该是 <script src="script.js"></script>，而不是 <script src="scrip.js"></script>。
在HTML中，你使用了一些HTML实体编码（如 ←、×、+ 等）。请确保这些编码都正确，以防止HTML渲染问题。
在JavaScript中，你使用了 handleMath 函数来处理加法、减法、乘法和除法，但在代码中检查操作符的时候，操作符应该是 '+'、'-'、'×' 和 '÷'，而不是 '+', '−', '×', '÷'。确保操作符的字符串值与你的switch语句中的情况匹配。
请确保你的事件监听器绑定正确，以确保在按钮被点击时 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

let runningTotal = 0;
let buffer = 0;
let previousOperator;

const screen = document.querySelector(&#39;.screen&#39;);

function buttonClick(value){
    if (isNaN(value)){
        handleSymbol(value);       
    }else{
        handleNumber(value);
    }
    screen.innerText = buffer;
}

function handleSymbol(symbol){
    switch(symbol){
        case &quot;C&quot;:
            buffer = &#39;0&#39;;
            runningTotal = 0;
            break;
        case &#39;=&#39;:
            if(previousOperator === null){
                return
            }
            flushOperation (parseInt(buffer));
            previousOperator = null;
            buffer = runningTotal;
            runningTotal = 0;
            break
        case &#39;←&#39;:
            if(buffer.length === 1){
                buffer = &#39;0&#39;;
            }else{
                buffer = buffer.substring(0, buffer.length - 1);
            }
            break;
        case &#39;+&#39;:
        case &#39;−&#39;:
        case &#39;&#215;&#39;:
        case &#39;&#247;&#39;:
            handleMath(symbol);
            break;
    }
}

function handleMath(symbol){
    if(buffer === &#39;0&#39;){
        return;
    }

    const intBuffer = parseInt(buffer);

    if(runningTotal === &#39;0&#39;){
        runningTotal = intBuffer
    }else{
        flushOperation(intBuffer);
    }
    previousOperator = symbol;
    buffer = &#39;0&#39;;
}

function flushOperation(intBuffer){
    if(previousOperator === &#39;+&#39;){
        runningTotal += intBuffer;
    }else if(previousOperator === &#39;−&#39;){
        runningTotal -= intBuffer;
    }else if(previousOperator === &#39;&#215;&#39;){
        runningTotal *= intBuffer;
    }else if(previousOperator === &#39;&#247;&#39;){
        runningTotal /= intBuffer;
    }
}

function handleNumber(numberString){
    if(buffer === &#39;0&#39;){
        buffer = numberString;
    }else{
        buffer += numberString;
    }
}

function init(){
    document.querySelector(&#39;.calc-buttons&#39;).addEventListener(&#39;click&#39;, function(event){
        buttonClick(event.target.innerText);
 })
}

init();

html{
    box-sizing: border-box;
    height: 100%;
}

*,
*::before,
*::after{
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
body{
    align-items: center;
    background: linear-gradient(320deg, #eb92be, #ffef78, #63c9b4);
    display: flex;
    font-family: &#39;Dosis&#39;, sans-serif;
    font-display: swap;
    height: inherit;
    justify-content: center;
}

.wrapper{
   backdrop-filter: blur(5.5px);
   -webkit-backdrop-filter: blur(55.5px);
   border-radius: 16px; 
   box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
   color: #232323;
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   background: rgba(225, 225, 225, 0.30);
   border: 1px solid rgba(225, 225, 225, 0.34);
   flex-basis: 400px;
   height: 540px;
   padding: 20px 35px;
}
.screen{
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    background:rgba(225, 225, 225, 0.75);
    border: 1px solid rgba(225, 225, 225, 0.01);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #232323;
    font-size: 35px;
    overflow: auto;
    padding: 20px;
    text-align: right;
    width: 326px;
}  

.calc-button-row{
    display: flex;
    justify-content: space-between;
    margin: 5% 0;
}

.calc-button{
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    background: rgba(225, 225, 225, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.01);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #232323;
    flex-basis: 20%;
    font-family: inherit;
    font-size: 24px;
    height: 65px;
}

.calc-button:last-child{
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    background: rgba(225, 225, 225, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.01);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #fff;
    background: #d72880;
}
.calc-button:last-child:hover{
    background-color: inherit;
    color: inherit;
}

.calc-button:hover{
    background-color: inherit;

}

.calc-button:active{
    background-color: #ffef78;
}

.double{
    flex-basis: 47%;
}

.triple{
    flex-basis: 73%;
}

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  &lt;title&gt;Calculator&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;section class=&quot;screen&quot;&gt;
        0
      &lt;/section&gt;

      &lt;section class=&quot;calc-buttons&quot;&gt;
        &lt;div class=&quot;calc-button-row&quot;&gt;
            &lt;button class=&quot;calc-button double&quot;&gt;
              C
            &lt;/button&gt;
            &lt;button class=&quot;calc-button&quot;&gt;
              &amp;larr;
            &lt;/button&gt;
            &lt;button class=&quot;calc-button&quot;&gt;
              &amp;divide;
            &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;calc-button-row&quot;&gt;
            &lt;button class=&quot;calc-button&quot;&gt;
              7
            &lt;/button&gt;
            &lt;button class=&quot;calc-button&quot;&gt;
              8
            &lt;/button&gt;
            &lt;button class=&quot;calc-button&quot;&gt;
              9
            &lt;/button&gt;
            &lt;button class=&quot;calc-button&quot;&gt;
              &amp;times;
            &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;calc-button-row&quot;&gt;
            &lt;button class=&quot;calc-button&quot;&gt;
              4
            &lt;/button&gt;
            &lt;button class=&quot;calc-button&quot;&gt;
              5
            &lt;/button&gt;
            &lt;button class=&quot;calc-button&quot;&gt;
              6
            &lt;/button&gt;
            &lt;button class=&quot;calc-button&quot;&gt;
              &amp;minus;
            &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;calc-button-row&quot;&gt;
              &lt;button class=&quot;calc-button&quot;&gt;
                1
              &lt;/button&gt;
              &lt;button class=&quot;calc-button&quot;&gt;
                2
              &lt;/button&gt;
              &lt;button class=&quot;calc-button&quot;&gt;
                3
              &lt;/button&gt;
              &lt;button class=&quot;calc-button&quot;&gt;
                &amp;plus;
              &lt;/button&gt;
        &lt;/div&gt;

        &lt;div class=&quot;calc-button-row&quot;&gt;
              &lt;button class=&quot;calc-button triple&quot;&gt;
                0
              &lt;/button&gt;
              &lt;button class=&quot;calc-button&quot;&gt;
                &amp;equals;
              &lt;/button&gt;
              
            &lt;/div&gt;
      &lt;/section&gt;
    &lt;/div&gt;


  &lt;script src=&quot;scrip.js&quot;&gt;&lt;/script&gt;
  
&lt;/body&gt;
&lt;/html&gt;

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

答案1

得分: 1

有一些问题我找到了：
有时缓冲区是数字，有时是字符串。所以在这一行中：

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

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

buffer = buffer.toString().substring(0, buffer.length - 1);
你试图检查 runningTotal 是否等于字符串 '0'，但它是一个数字。

if (runningTotal === 0)

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

英文:

There are couple of issues I found:

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);

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.

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

答案1

Combine Latest – 相同的可观察对象返回不同的值

给DatePicker设置次要主题颜色。

将字符串转换为数字在JavaScript中不起作用。

Android Intent 在 Android Chrome 最近版本 110 中无法打开。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论