Question

更新，因此这里是一个更好的代码。我将其缩减为仅具有重现该问题所必需的内容。

// change the color of the button when mousedown/up

let button = document.getElementsByClassName('button');
  for(i = 0; i < button.length; i++){
    button[i].onmousedown = function() {
      this.style.backgroundColor = "#a3a3a3";
    };

    button[i].onmouseup = function() {
      this.style.backgroundColor = "#808080";
    };
}

let buttonLg = document.getElementsByClassName('button-lg');
  for(i = 0; i < buttonLg.length; i++){
    buttonLg[i].onmousedown = function() {
      this.style.backgroundColor = "#a3a3a3";
    };

    buttonLg[i].onmouseup = function() {
      this.style.backgroundColor = "#808080";
    };
}

let button2 = document.getElementsByClassName('button2');
  for(i = 0; i < button2.length; i++){
    button2[i].onmousedown = function() {
      this.style.backgroundColor = "#ffe299";
    };

    button2[i].onmouseup = function() {
      this.style.backgroundColor = "#ffca47";
    };
}

// show the numbers typed or result

let result = document.getElementById('result');

let preview = [];


let buttonAc = document.getElementById('ac');
let plusMinus = document.getElementById('plus-minus');
let plusMinus2 = document.getElementById('plus-minus2');

let buttonN7 = document.getElementById('seven');
let buttonN72 = document.getElementById('seven2');
let buttonN8 = document.getElementById('eight');
let buttonN82 = document.getElementById('eight2');
let buttonN9 = document.getElementById('nine');
let buttonN92 = document.getElementById('nine2');


// button AC erasing result and changing outlook to C when other buttons are clicked
// number 0 disapear when there is only zero and when a key is clicked

buttonAc.onclick = function () {
  buttonAc.innerHTML = "AC";
  preview = [];
  result.innerHTML = 0;
}

// concatenation of the buttons numbers without any commas

buttonN7.onclick = function () {
  document.getElementById('ac').innerHTML = "C";
  buttonN7 = 7;
  preview.push(buttonN7);
  const a = preview.join('');
  result.innerHTML = a;
}

buttonN8.onclick = function () {
  document.getElementById('ac').innerHTML = "C";
  buttonN8 = 8;
  preview.push(buttonN8);
  const a = preview.join('');
  result.innerHTML = a;
}

buttonN9.onclick = function () {
  document.getElementById('ac').innerHTML = "C";
  buttonN9 = 9;
  preview.push(buttonN9);
  const a = preview.join('');
  result.innerHTML = a;
}

// positive to negative value and vice versa with the plus, minus key

plusMinus.onclick = function(){

  let a = preview.join('');
  let b = parseInt(a, 10);
  let c = b * -1;

  result.innerHTML = c;
  plusMinus.style.display = "none";
  plusMinus2.style.display = "block";

  //this code below works
  //document.getElementById('nine').style.display = "none";
  
  //that one does not work
  buttonN9.style.display = "none";
  
  buttonN92.style.display = "block";
}

plusMinus2.onclick = function(){

  let a = preview.join('');
  let b = parseInt(a, 10);
  let c = b * -1;

  result.innerHTML = b;
  plusMinus2.style.display = "none";
  plusMinus.style.display = "block";
}

buttonN92.onclick = function(){
  result.innerHTML = 0;
  preview = [];
  
  //this code below works
  //document.getElementById('nine').style.display = "block";
  
  //that one does not work
  buttonN9.style.display = "block";
  
  buttonN92.style.display = "none";
}

h1 {
  padding: 30px;
}

.result {
  font-size: 80px;
  border: 2px solid #000;
  color: #f9f9f9;
  padding-right: 20px;
  background-color: #696969;
}

.row1 {
  border: 2px solid #000;
}

.button,
.button2,
.button-lg {
  width: 25%;
}

p {
  cursor: pointer;
}

#ac,
#plus-minus,
#plus-minus2,
#percentage,
#seven,
#eight,
#nine,
#seven2,
#eight2,
#nine2 {
  font-size: 40px;
  background-color: #808080;
  color: #f9f9f9;
  height: 140px;
  padding-top: 50px;
  margin-bottom: 0px;
  border-right: 1px solid #696969;
}

#ac,
#plus-minus,
#percentage,
#seven,
#eight,
#nine {
  display: block;
}

#plus-minus2,
#seven2,
#eight2,
#nine2 {
  display: none;
}

#division,
#multiplication{
  font-size: 40px;
  background-color: #ffca47;
  color: #f9f9f9;
  height: 140px;
  margin-bottom: 0px;
  padding-top: 50px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>Calculator</title>
  </head>
  <body>
    <h1 class="text-center">Calculator</h1>

    <div class="container">
      <div class="row">
        <div class="col-xl-12">
          <h5 id="result" class="card-title text-right result">0</h5>
        </div>
      </div>
      <div class="row">
        <div class="col-xl-12">
          <div class="card-group row1">
            <p id="ac" class="card-text text-center button">AC</p>
            <p id="plus-minus" class="card-text text-center button">+ | -</p>
            <p id="plus-minus2" class="card-text text-center button">+ | -</p>
            <p id="percentage" class="card-text text-center button">%</p>
            <p id="division" class="card-text text-center button2">/</p>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-xl-12">
          <div class="card-group row2">
            <p id="seven" class="card-text text-center button">7</p>
            <p id="seven2" class="card-text text-center button">7</p>
            <p id="eight" class="card-text text-center button">8</p>
            <p id="eight2" class="card-text text-center button">8</p>
            <p id="nine" class="card-text text-center button">9</p>
            <p id="nine2" class="card-text text-center button">9</p>
            <p id="multiplication" class="card-text text-center button2">X</p>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="script.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

这就是想法：它是一个计算器，所以我从iMac中打开了计算器，我只是检查了行为以尝试重现它。

您可以做什么： -单击数字，在屏幕结果上显示它们。 -单击交流，将按钮更改为C并清除屏幕结果。 -单击％，/和X仍然没有任何效果。 -点击“ + |-”将数字交换为负号。

这就是我想要做的。通常，当您多次单击“ + |-”键时，它会从负数变为正数等。...，通常，如果您单击一个数字，它应该回到0。我首先尝试使用外部按钮测试，然后使用键9来查看它是否可以正常工作，并在此处添加以下代码：

document.getElementById('nine').style.display = "block"; //or none

它完美地工作！但是，当我抛出该代码时（我在整个代码段中将它们标记了出来，以便您更好地识别它们）

buttonN9.style.display = "block"; //or none

BADABOOM，控制台上的红色警报。

几个小时以来，我尽一切努力尝试着一切；尽我最大的努力去回报我的大脑；我还在做今天晚上，我必须和妻子一起去某个地方。很难不去想它。

老实说，iPhone的计算器没有相同的行为。如果您发射1,2,3，则+ |-变为-123。如果您再次发射7，则返回-1237。所以，也许我的大脑太混乱了，但我想这样做:)

Answer 1

只需将访问DOM的所有代码放在window.onload()处理程序中，就像这样：

<script>
    window.onload = function() {

        let plusMinus = document.getElementById('plus-minus');
        let buttonN9 = document.getElementById('nine');
        // other variable initialization 

        plusMinus.onclick = function() { 

            buttonN9.style.display = "none"; 
            // other handler code logic
        }

        // other event handlers
    };
</script>

这样，您可以确保在访问或操作DOM之前就已经准备好了。

同样，从您的Github存储库here中的html文件中获取；您在脚本之后包括了几个外部脚本（包括jquery）。除了这些脚本取决于您自己的脚本（不太可能）之外，您应始终将自己的脚本 last 放在代码可能依赖的其他外部脚本之后。

更新：在body标记内触发window.onload时存在问题。请参阅此post的答案。除了我以前的回答，尝试将脚本放入header标签中，如下所示：

<head>
    <!-- Place other external scripts here -->
    <script src='myscript.js'></script>
</head>

Answer 2

所以，这是解决方案。作为一个初学者，我首先犯了一些错误，我在重复这些功能。我为每种行为创建了一个函数。主要问题是我想通过数组而不使用任何循环来获得索引。达成交易的循环现在按我想要的方式表现……

按钮列表未更改。你有什么： -处理重置按钮的功能。 -处理数字按钮值的功能 -正/负数的功能 -一种功能，当您单击一个数字时，可以重置正数/负数。

这就是我所拥有的计算器的行为方式，所以我只是想做完全相同的事情。非常感谢您的帮助！

function buttonResetHandler(button){
  button.onclick = function (){
    button.innerHTML = "AC";
    preview = [];
    result.innerHTML = 0;
  }
}

buttonResetHandler(buttonAc);

// concatenation of the buttons numbers without any commas

function buttonNumberHandler(button, value){
  button.onclick = function(){
    buttonAc.innerHTML = "C";
    button = value;
    preview.push(button);
    const a = preview.join('');
    result.innerHTML = a;
  }
}

buttonNumberHandler(buttonN0, 0);
buttonNumberHandler(buttonN1, 1);
buttonNumberHandler(buttonN2, 2);
buttonNumberHandler(buttonN3, 3);
buttonNumberHandler(buttonN4, 4);
buttonNumberHandler(buttonN5, 5);
buttonNumberHandler(buttonN6, 6);
buttonNumberHandler(buttonN7, 7);
buttonNumberHandler(buttonN8, 8);
buttonNumberHandler(buttonN9, 9);


// positive to negative value and vice versa with the plus, minus key

function buttonPlusMinusHandler(button1, button2, button3, button4){
  button1.onclick = function(){

    let a = preview.join('');
    let b = parseInt(a, 10);
    let c = b * -1;

    result.innerHTML = c;
    button1.style.display = "none";
    button2.style.display = "block";
    for(i = 0; i < button3.length; i++){
      button3[i].style.display = "none";
    }

    for(i = 0; i < button4.length; i++){
      button4[i].style.display = "block";
    }

    if(result.innerHTML == c){
      button2.onclick = function(){
        result.innerHTML = b;
        button2.style.display = "none";
        button1.style.display = "block";
        }
      }
    }
  }

buttonPlusMinusHandler(plusMinus, plusMinus2, allButtonsN, allButtonsN2);

function buttonNumberResetPlusMinus(button, button2){
  for(i = 0; i < button.length; i++){
    button[i].onclick = function(){
      preview = [];
      result.innerHTML = 0;
      for(i = 0; i < button2.length; i++){
        button[i].style.display = "none";
        button2[i].style.display = "block";
      }
    }
  }
}

buttonNumberResetPlusMinus(allButtonsN2, allButtonsN);

控制台上的object.style.display抛出消息错误

2 个答案: