时间戳

首页 > 解决方案 > object.style.display 在控制台上抛出消息错误

javascript - object.style.display 在控制台上抛出消息错误

问题描述

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

// 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 打开了我的计算器，我只是检查了行为以尝试重现它。

你可以做什么： - 点击数字，在屏幕结果上显示它们。- 点击 AC 使按钮变为 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。所以，也许我把我的大脑搞得太乱了，但我想这样做:)

标签： javascripthtmlcssarraysbootstrap-4

解决方案

只需将所有访问 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 存储库中的 html文件；您在脚本之后包含了几个外部脚本（包括 jquery）。除了这些脚本依赖于您自己的脚本之外 - 这不太可能，您应该始终将自己的脚本放在您的代码可能依赖的其他外部脚本之后。

更新body：从标签内触发 window.onload 存在问题。看到这个帖子的答案。除了我之前的回答，试着把你的脚本放在header标签中，如下所示：

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

推荐阅读