尝试使用 getElementByID 和 addEventListener 完成我的编码训练营准备工作

Question

我明天开始我的编码训练营，我已经能够完成除这一个以外的所有准备工作模块。

仅使用 html 和 Javascript，我将尝试让这些按钮起作用以在以下代码中更改此对象：

    <!DOCTYPE html>
    <html>
    <head>
    <title>Jiggle Into JavaScript</title>
    <!-- <script type="text/javascript" 
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
    </head>
    <body>

    <p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"> . 
    </div>

    <button id="button1">Grow</button>
    <button id="button2">Blue</button>
    <button id="button3">Fade</button>
    <button id="button4">Reset</button>

    <script type="text/javascript" src="javascript.js"></script>

    </body>
    </html>

这就是我所在的位置，我显然遇到了问题。我觉得我知道的就够把事情搞得一团糟了。

//the following is the fade function, 
//currently unattached to button:
//source: 

var box = document.getElementById('box');

function fadeOut(elem, speed) {

  if (!elem.style.opacity) {
    elem.style.opacity = 1;
  } // end if

  var outInterval = setInterval(function() {
    elem.style.opacity -= 0.02;
    if (elem.style.opacity <= 0) {
      clearInterval(outInterval);
    } // end if
  }, speed / 50);
}

fadeOut(box, 2000);

// end fadeOut()

<!DOCTYPE html>
<html>

<head>

  <title>Jiggle Into JavaScript</title>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

</head>

<body>

  <p>Press the buttons to change the box!</p>

  <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"> .
  </div>

  <button id="growBtn">Grow</button>
  <button id="blueBtn">Blue</button>
  <button id="fadeBtn">Fade</button>
  <button id="resetBtn">Reset</button>

  <script type="text/javascript">
    document.getElementById("growBtn").addEventListener("click", function() {

      document.getElementById("box").style = "height:250px; width:250px;background-color: orange;margin: 25px";

    });

    document.getElementById("blueBtn").addEventListener("click", function() {

      document.getElementById("box").style = "height:150px; width:150px;background-color: blue;margin: 25px";

    });

    document.getElementById("fadeBtn").addEventListener("click", function() {

      document.getElementById("box").onclick.fadeOut();

    });

    document.getElementById("resetBtn").addEventListener("click", function() {

      document.getElementById("box").style = "height:150px; width:150px;background-color: orange;margin: 25px";

    });
  </script>

  <!-- Linking the JavaScript file -->

</body>

</html>

我已经研究了几天，但发现了很多不同的选择，none 似乎是合适的人选。

以下是目前存在的问题：

变大按钮：好吧，我可以让它变大，但只是一次，而不是每次单击按钮时。
蓝色按钮： 我可以在单击按钮时将其设置为蓝色，但如果先单击增长按钮，大小会变回原来的大小。
淡入淡出按钮: 我在这个网站上找到了淡入淡出功能的代码（在代码中引用），但我不知道如何应用它到我的 fadeBtn 以便该框在打开页面时立即消失。这是我的 js 文件中目前唯一的代码。
重置按钮： 这有效！不确定我用来让它工作的代码是否合适，但我会在这一点上取得任何胜利！

我绝对会接受任何 advice/guidance/google 愿意分享的链接来帮助我！我想从右脚开始训练营并解决这个问题。

提前致谢！

Answer 1

到此为止，我解释了内容和原因，但如果您有任何问题，请直接提问：

HTML :

<!DOCTYPE html>
<html>
<head>
  <title>Jiggle Into JavaScript</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <met charset="utf-8">
</head>
<body>
  <p>Press the buttons to change the box!</p>

  <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"> .
  </div>

  <button id="growBtn">Grow</button>
  <button id="blueBtn">Blue</button>
  <button id="fadeBtn">Fade</button>
  <button id="resetBtn">Reset</button>

  <script type="text/javascript">
    // The simples aproach would be to create global variable boxHeightAndWoxWidth and change it
    var boxHeightAndWidth = 150;
    document.getElementById("growBtn").addEventListener("click", function() {
      // Well my mate if you are tring to make box bigger each time then don't pass fixed height and width 
      // but make it bigger each time you pressed the button like so:
      boxHeightAndWidth += 10;
      // and we don't change color cuz why even?
      // document.getElementById("box").style = "height:" + boxHeightAndWidth +"px; width:" + boxHeightAndWidth + "px;background-color:orange; margin:25px";
      document.getElementById("box").style.height = boxHeightAndWidth + "px";
      document.getElementById("box").style.width = boxHeightAndWidth + "px";
      // jea we update this too so if you "faded" your box it will be seen again
      document.getElementById("box").style.opacity = "1";
    });

    document.getElementById("blueBtn").addEventListener("click", function() {
      // well of course it changes to orginal - you are passing fixed values which are lower then from growBtn
      // here we will use the global boxHeightAndWidth so it would stay the same
      // OR JUST DON'T CHANGE and change only required variables
      // document.getElementById("box").style = "height:150px; width:150px; background-color:blue; margin:25px";
      document.getElementById("box").style.backgroundColor = "blue";
      // jea we update this too so if you "faded" your box it will be seen again
      document.getElementById("box").style.opacity = "1";
    });


    // jea let's break this to pieces
    document.getElementById("fadeBtn").addEventListener("click", function() { // here you add event "onclick"

      // document.getElementById("box").onclick.fadeOut(); // here too but not in correct way so it doesn't even work
      // https://www.w3schools.com/jsref/event_onclick.asp - here, it's nicely exlpained
      // Correct way:
      // document.getElementById("box").onclick = function(){
      //   fadeOut();
      // };
      // but it's wrong too, because you would have to click twice to activate this script - if you wan't this behaviour the use "ondblclick"
      // so just pass this:
      // fadeOut();
      // but it's wrong too cuz this function requires variable to be passed
      // fadeOut(elem, speed) - elem - element to which apply fade and speed - speed of fade, so we will just copy the call from javascript.js:
      var box = document.getElementById('box');
      fadeOut(box, 2000);
      // and for explainations why it started without any action go to javascript.js
    });

    document.getElementById("resetBtn").addEventListener("click", function() {
      // This works because you reset styles to their start values. 
      document.getElementById("box").style = "height:150px; width:150px; background-color:orange; margin:25px";

    });
  </script>

  <!-- Linking the JavaScript file -->
  <script type="text/javascript" src="javascript.js"> </script>

</body>

</html>

和javascript.js：

//the following is the fade function,
   //currently unattached to button:
   //source: 


   function fadeOut(elem, speed) {

   if (!elem.style.opacity) {
   elem.style.opacity = 1;
   } // end if

   var outInterval = setInterval(function () {
   elem.style.opacity -= 0.02;
   if (elem.style.opacity <= 0) {
       clearInterval(outInterval);
   } // end if
   }, speed / 50);
   }
   // cuz this calls the function just when the page loads so on the start of everything:
   // fadeOut(box, 2000);

   // end fadeOut()

希望你现在明白一切<3.

Answer 2

首先，没有理由不断获取页面上的元素 - 在开始时将其分配给一个变量，然后通过您的函数引用该变量。

const box = document.getElementById('box');

此外，在更新元素的样式时，您应该针对要更改的特定样式，然后直接更新它

// Instead of this
document.getElementById("box").style = "height:250px; width:250px; 

// Do this ( Also applying the above tip )
const box = document.getElementById('box');

box.style.height = '250px';
box.style.width = '250px';

Grow button: Well, I can make it get bigger, but just once, not every time the button is clicked

您的代码目前没有执行任何操作动态 - 您只是将其设置为硬编码大小。您要做的是获取元素的当前大小，增加它，然后将该值分配回您的元素

您可以使用 offsetHeight and offsetWidth 获取元素的 height / width 作为数字，以便于添加

let height = box.offsetHeight + 50; // Increasing the current size by 50
let width = box.offsetWidth + 50;

box.style.height = height + 'px'; // Assigning our increased size back to the box
box.style.width = width + 'px';

Blue button: I can make it blue when the button is clicked, but the size changes back to the original if the grow button was clicked first.

在您的整个函数中，您无缘无故地覆盖了框元素上的所有样式。除非您要覆盖样式或删除样式，否则每种样式的值将保持不变。当您更新 backgroundColor 时，只需更新 backgroundColor.

box.style.backgroundColor = 'blue'; // This is all you need to change

Fade button: I found the code to a fadeOut function on this site (referenced in the code), but I don't know how to apply it to my fadeBtn so the box fades immediately upon opening the page

我有点困惑，为什么您希望在页面加载后立即将此样式应用于框，确定将此样式应用于按下按钮时的框更合适吗？如果是这种情况，只需将函数调用移动到按钮

上的 click 处理程序中

document.getElementById("fadeBtn").addEventListener("click", function() {
  fadeOut(box, 2000);
});

Reset button: This works! Not sure that the code I used to make it work is the appropriate way, but I will take any win at this point!

确实如此，但您不需要重置 margin 因为您永远不会更改它。

另外，因为你的 fadeOut 函数是运行它是 setInterval 直到不透明度为 0，我们需要一种方法来访问和取消这个间隔，否则元素将继续淡出- 为此，我已将 outInterval 声明移到函数之外，因此您可以在重置函数内调用 clearInterval(outInterval)（这在底部的代码片段中更为明显）

// Reset 'Grow'
box.style.height = '150px';
box.style.width = '150px';

// Reset 'Blue'
box.style.backgroundColor = 'orange';

// Reset 'Fade'
clearInterval(outInterval);
box.style.opacity = 1;

这是一个实现了这些更改的代码段，因此您可以看看它是如何工作的 - 如果您对某些事情不确定或我错过了细节，请随时提出任何问题

const box = document.getElementById('box');
let outInterval = null;

document.getElementById("growBtn").addEventListener("click", function() {
  let height = box.offsetHeight + 50;
  let width = box.offsetWidth + 50;
  
  box.style.height = height + 'px';
  box.style.width = width + 'px';
});

document.getElementById("blueBtn").addEventListener("click", function() {
  box.style.backgroundColor = 'blue';
});

document.getElementById("fadeBtn").addEventListener("click", function() {
  fadeOut(box, 2000);
});

document.getElementById("resetBtn").addEventListener("click", function() {
  // Reset 'Grow'
  box.style.height = '150px';
  box.style.width = '150px';
  
  // Reset 'Blue'
  box.style.backgroundColor = 'orange';
  
  // Reset 'Fade'
  clearInterval(outInterval);
  box.style.opacity = 1;
});

function fadeOut(elem, speed) {
  if (!elem.style.opacity) {
    elem.style.opacity = 1;
  } // end if

  outInterval = setInterval(function() {
    elem.style.opacity -= 0.02;
    if (elem.style.opacity <= 0) {
      clearInterval(outInterval);
    } // end if
  }, speed / 50);
};

<body>
  <p>Press the buttons to change the box!</p>

  <div id="box" class="box" style="height:150px; width:150px; background-color:orange; margin:25px"> . </div>

  <button id="growBtn">Grow</button>
  <button id="blueBtn">Blue</button>
  <button id="fadeBtn">Fade</button>
  <button id="resetBtn">Reset</button>
</body>

尝试使用 getElementByID 和 addEventListener 完成我的编码训练营准备工作

Trying to complete my coding bootcamp prework using getElementByID and addEventListener

html

javascript

getelementbyid

addeventlistener