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

问题描述 投票：0回答：2

我明天开始我的编码训练营，除了这个课程，我已经完成了所有的岗前课程。

仅使用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: https://stackoverflow.com/questions/28662893/fade-in-and-fade-out-in-pure-javascript-without-jquery

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>

我已经研究了几天，但发现了很多不同的选择，似乎没有一个合适的选择。

这里是当前的问题：

  • [增长按钮：好吧，我可以使其变大，但是仅一次，而不是每次单击该按钮时就可以。

  • [蓝色按钮：单击按钮时可以将其设为蓝色，但是如果首先单击增长按钮，则大小会变回原始大小。

  • Fade button：我在此站点上找到了一个fadeOut函数的代码（代码中已引用），但是我不知道如何将其应用于我的fadeBtn，因此打开该框后，该框会立即消失页。这是目前我js文件中的唯一代码。

  • [重置按钮：这有效！不确定我用来使之正常工作的代码是否合适，但我现在会赢吗！

我绝对会接受任何人愿意分享的任何建议/指导/ google链接来帮助我！我想从右脚开始进行训练，然后解决这个问题。

提前感谢！

javascript html addeventlistener getelementbyid
2个回答
-2
投票

您去这里，我解释了什么以及为什么，但是如果您有问题，请问：

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: https://stackoverflow.com/questions/28662893/fade-in-and-fade-out-in-pure-javascript-without-jquery


   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。

1
投票

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

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

此外，在更新Element的样式时，您应该以要更改的特定样式为目标，然后直接对其进行更新

// 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';

  1. 增长按钮：好吧，我可以把它变大，但是只有一次，而不是每次都单击按钮

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

您可以使用offsetHeight和offsetHeight来将元素的offsetWidth / offsetWidth作为数字获得，以便于添加

height

  1. [蓝色按钮：单击按钮时可以将其设为蓝色，但是如果首先单击增长按钮，则大小会变回原始大小。
在整个函数中，您无缘无故地覆盖box元素上的每个样式。除非您覆盖样式或删除样式，否则每种样式的值将保持不变。当您更新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';
。
backgroundColor
  1. 淡入淡出按钮：我在此站点上找到了一个淡出功能的代码（在代码中已引用），但是我不知道如何将其应用于我的fadeBtn，因此该框在打开页面后立即淡出
我有点困惑，为什么您希望在页面加载后立即将其应用于框，确定将这种样式应用于按钮按下时的框更合适吗？如果是这种情况，只需将函数调用移到按钮上的backgroundColor处理程序中
box.style.backgroundColor = 'blue'; // This is all you need to change

  1. 重置按钮：可以使用！不确定我用来使之正常工作的代码是否合适，但是我现在会赢吗！
是的，但是您无需重置click，因为您从未更改过它。
此外，由于document.getElementById("fadeBtn").addEventListener("click", function() {
  fadeOut(box, 2000);
});
函数一直在运行margin，直到不透明度为0，所以我们需要一种方法来访问和取消此间隔，否则该元素将继续褪色-我将fadeOut声明移到了外部的功能，因此您可以在重置功能内调用setInterval（这在底部的代码段中更加明显）
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;
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.