如何创建一个计数器循环，该循环在单击提交按钮时启动，并输出多行单词，每个单词前面都有一个数字

How to Create a counter Loop that starts when submit button is clicked and outputs multiple lines of words with a number in front of each word?

本文关键字：循环 单词 启动 输出 数字 有一个 前面 单击 创建 何创建 一个      更新时间：2023-09-26

我需要创建一个在用户单击"提交"按钮后开始的计数器循环。但是，此"提交"按钮已在另一个变量中使用。提交按钮需要同时做两件事，我不知道如何做到这一点。当用户输入他们的名字、姓氏和中间名首字母信息，然后单击提交按钮时，不仅标题会改变，而且需要开始对 125 的计数器。这是我到目前为止的代码。我需要进行哪些更改才能确保当用户单击提交时，<h1>会随着问候语中的名字而更改，并且循环开始从 1 计数到 125，后面跟着"hello world"之类的词。

例：
1(你好世界
2(你好世界
3(你好世界
等

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="fizzbuzz.css">
  <title>Fizz Buzz 0</title>
  <script>
    function clickFunction(){
      var firstName =  document.getElementById("firstName").value;
      var middleName=  document.getElementById("middleName").value;
      var lastName=    document.getElementById("lastName").value;
      document.getElementById("greeting").innerHTML =
        "Welcome, " + firstName + " " + middleName+ " " +lastName + "!";
    };
    function clickFunction = ""; {
      while (var i=0;i<125;i++) {
        out = out + "London Kings" + "</br>";
        document.getElementById("greeting").innerHTML = out;
      }
    }
  </script>
</head>
<body>
  <div id="header">
    <p>
      <img src="images/banner.jpg" alt="Banner" height="130" width="940" style="border:0" />
    </p>
  </div>
  <div id="content">  
    <div id="feature">
      <h2 id="greeting"> Welcome to London Kings Football! </h2> 
      <form>
        First Name <input id="firstName"> </input>
        Middle Initial <input id="middleName"> </input>
        Last Name <input id="lastName"> </input>
      </form>
      <button onClick="clickFunction()",> Submit </button>
    </div>
  </div>
</body>
</html>
您可以

对当前代码进行一些更改，以便其运行

  1. 将 while 循环更改为 for 循环
  2. 初始化 out 变量(在定义之前使用它在右手分配者(

所以你的最后一个功能是

function clickFunction() {
  var firstName = document.getElementById("firstName").value;
  var middleName = document.getElementById("middleName").value;
  var lastName = document.getElementById("lastName").value;
  var out = '';
  document.getElementById("greeting").innerHTML = "Welcome, " + firstName + " " + middleName + " " + lastName + "!";

  for (var i = 0; i < 125; i++) {
    out = out + "London Kings" + "</br>";
    document.getElementById("greeting").innerHTML = out;
  }
}

其他可以使您的代码更好的事情

  1. 不要内联添加事件侦听器，它更难推理你的代码而是使用document.querySelector("button").addEventListener("click", function(){});
  2. 将脚本标签移动到结束正文标签(</body>(之前，这样JavaScript代码解析就不会阻塞页面的呈现(JS在一个线程中运行(
  3. 不要为每次重复的 for 循环查询 DOM，而是将问候查询移动到函数的顶部，以便只运行一次(每个函数调用(
  4. 不要在每次运行代码时都查询 DOM 元素(上面 3 的更好解决方案，而是将查询移动到顶层(这些变量将是全局的，我们不喜欢全局变量(或创建一个闭包来封装您的价值

#4 示例

var clickFunction = (function(){
    var firstName = document.getElementById("firstName");
    var middleName = document.getElementById("middleName");
    var lastName = document.getElementById("lastName");
    var greeting = document.getElementById("greeting");
    var out = '';
    return function(){
      greeting.innerHTML = "Welcome, " + firstName + " " + middleName + " " + lastName + "!";
      for (var i = 0; i < 125; i++) {
        out = out + "London Kings" + "</br>";
        greeting.innerHTML = out;
      }
    }
  }())
document.querySelector("button").addEventListener("click", clickFunction)

包含上述代码的脚本标签必须在结束正文标签之前

相关文章：