Question

我完全不知道从哪里开始，我将如何创建一个倒数按钮，以便每次单击我的按钮时，它都会打印出全局变量，并在innerHTML中以及当它命中0时将其减小1说BOOM？

我知道我必须在外部声明变量，但不确定随后该怎么做

JS：

var i = 20 

function myFunction()
     {
      i = i--; // the value of i starting at 20
     }

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- link to external JS file.  Note that <script> has an
  end </script> tag -->
  <meta charset="utf-8">
  <title> Task 6 </title>
  <link href="style.css" type="text/css" rel="stylesheet">
  <script src="task6.js" type="text/javascript"></script>
</head>
<body>
  <!-- Create a paragraph with id mydata -->
  <div id="box">
  <p id="mydata"> Count Down  </p>
  <p> <button  onclick="myFunction();"> Click </button></p>
</div>
</body>
</html>

Answer 1

我尝试了此代码，并且运行正常

var i = 20;

function myFunction() {
myData = document.getElementById("mydata");

 i = i - 1;
  myData.textContent = i;

  if(i <= 0) {//with <=0 the user if click again,after zero he sees only BOOM
    myData.textContent = "BOOM!"
  }
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- link to external JS file.  Note that <script> has an
  end </script> tag -->
  <meta charset="utf-8">
  <title> Task 6 </title>
  <link href="style.css" type="text/css" rel="stylesheet">
  <script src="task6.js" type="text/javascript"></script>
</head>
<body>
  <!-- Create a paragraph with id mydata -->
  <div id="box">
  <p id="mydata"> Count Down  </p>
  <p> <button  onclick="myFunction();"> Click </button></p>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- link to external JS file.  Note that <script> has an
  end </script> tag -->
  <meta charset="utf-8">
  <title> Task 6 </title>
  <link href="style.css" type="text/css" rel="stylesheet">
  <script  type="text/javascript">
  var i = 20;

function myFunction() {
var myData = document.getElementById("mydata");
 
 i = i - 1;
  myData.textContent = i;

  if(i <= 0) {
    myData.textContent = "BOOM!"
  }
}
  
  
  </script>
</head>
<body>
  <!-- Create a paragraph with id mydata -->
  <div id="box">
  <p id="mydata"> Count Down  </p>
  <p> <button  onclick="myFunction();"> Click </button></p>
</div>
</body>
</html>

Answer 2

最好不要在HTML中内联JS，因此我将提供一个额外的示例来展示如何使用几种DOM选择方法将其分离：

let count = 20;

// grab the element with the mydata id
const mydata = document.getElementById('mydata');

// grab the button and attach an click event listener to it -
// when the button is clicked the `handleClick` function is called
const button = document.querySelector('button');
button.addEventListener('click', handleClick, false);

function handleClick() {
  if (count === 0) {
    mydata.textContent = 'Boom';
  } else {
    mydata.textContent = count;
  }
  count--;
}

<body>
  <p id="mydata">Countdown</p>  
  <button>Click</button>
  <script src="task6.js" type="text/javascript"></script>
</body>

参考

Answer 3

我假设您想在<p id="mydata"> Count Down </p>处显示变量输出和BOOM，如果我对我有误的话。所以，像这样：

let i = 20;
const myData = document.querySelector("#mydata");
function myFunction() {
  i = i - 1;
  myData.textContent = i;

  if(i === 0) {
    myData.textContent = "BOOM!"
  }
}

您几乎了解了全部内容，只错过了textContent和if部分。如果这是您想要实现的。如果这不是您想要的东西，请打我，以便我纠正。干杯：）

Answer 4

您需要某种方式在变量内部显示数字。简化方法之一是使用getElementById（）和内部HTML将文本设置为段落标记。例如，运行减量后，在下一行中，您将执行以下操作...

function myFunction()
 {
  i = i--; // the value of i starting at 20
  document.getElementById("mydata").innerHTML = i;
 }

此代码仅从DOM中获取您的“ mydata”段落，然后将数字作为html注入标签。

倒数计时答题器-JS

4 个答案: