文章/答案/技术大牛

发布

社区首页 >问答首页 >尝试使用getElementByID和addEventListener完成我的编码入门准备工作

问尝试使用getElementByID和addEventListener完成我的编码入门准备工作
EN

Stack Overflow用户

提问于 2020-01-17 23:13:30

回答 2查看 489关注 0票数 0

我明天开始我的编码入门营，我已经能够完成我的所有工作前模块，除了这一个。

仅使用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>

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

以下是他们目前面临的问题：

Grow按钮: clicked.
Blue按钮:好吧，我可以让它变大一次，但不是每次都是clicked.
Blue按钮:当单击按钮时，可以使它变成蓝色，但是如果单击grow按钮，大小会改变回原来的值：，我在这个站点上找到了一个fadeOut函数的代码(在代码中引用)，但是我不知道如何将它应用到我的fadeBtn中，这样，打开页面时框就会消失。这是我的js文件中目前唯一的代码。
Reset按钮：这个工作！我不确定我用来使它工作的代码是否合适，但我会在这一点上取得任何胜利！

我将绝对采取任何建议/指导/谷歌链接，任何人都愿意分享，以帮助我！我想从右脚开始训练营，想办法解决这个问题。

提前感谢！

javascript

html

addeventlistener

getelementbyid

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-01-18 00:06:55

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

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按钮:嗯，我可以让它变大，但只需一次，并不是每次单击该按钮时，

您的代码目前并不是动态的-您只是将其设置为硬编码大小。相反，您要做的是获取元素的当前大小，增加该大小，然后将该值重新分配给您的元素。

您可以使用offsetHeight和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';

蓝色按钮:当单击该按钮时，我可以将其变为蓝色，但如果首先单击grow按钮，则大小会更改回原来的大小。

在整个功能中，您都在无缘无故地覆盖box元素上的每个样式。除非您正在覆盖样式或删除样式，否则每个样式的值将保持不变。在更新backgroundColor时，只需更新backgroundColor即可。

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

淡入按钮:我在这个站点上找到了一个fadeOut函数的代码(在代码中引用)，但是我不知道如何将它应用到我的fadeBtn中，所以打开页面

后，这个框就会立即消失。

我有点困惑，为什么你会希望这个应用到框中，一旦页面加载，肯定将这种风格应用到框按钮按下是更合适的？如果是这样，只需将函数调用移动到按钮上的click处理程序中即可。

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

重置按钮:这是有效的！我不确定我用来使它工作的代码是否合适，但我会在这一点上取得任何胜利！

确实如此，但是您不需要重置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>

票数 1

Stack Overflow用户

发布于 2020-01-17 23:53:43

给你，我解释了什么和为什么，但如果你有问题，只需问：

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

我希望你现在能理解所有的事情。

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59795964

复制

相似问题

问尝试使用getElementByID和addEventListener完成我的编码入门准备工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尝试使用getElementByID和addEventListener完成我的编码入门准备工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尝试使用getElementByID和addEventListener完成我的编码入门准备工作
EN