时间戳

首页 > 解决方案 > 为按钮创建了一个具有两个函数的 AddEventListener。两个功能中只有一个起作用

javascript - 为按钮创建了一个具有两个函数的 AddEventListener。两个功能中只有一个起作用

问题描述

我正在尝试创建一个事件侦听器，然后单击该按钮，会发生两个操作：

  1. 进度条更新（它已经更新了）
  2. p 标签内的文本显示在进度条下方，并且每次单击都会更改。所以对于 25% 我想显示“第 1 步”，对于 50% 我想显示“第 2 步”，对于 75% 显示“第 3 步”和 100%，显示“第 4 步”。

现在，唯一更新的是进度条。该功能没有破坏，但 p 标签没有显示。想知道是否有人可以告诉我我做错了什么，看看是否有可能的解决方案。

我采用的方法来自我在 SO 上看到的另一个示例。
我创建了一个名为 textExample 的函数，我认为我正在创建一个数组，然后循环遍历它，然后通过创建另一个事件侦听器然后传递一个回调函数来显示文本。

var btn = document.querySelector('#next')
btn.addEventListener("click", move)
var width = 25;

function move() {
  var elem = document.getElementById("myBar");
  if (width < 100) {
    width += 25;
    elem.style.width = width + '%';
    elem.innerHTML = width * 1 + '%';
  }
}

btn.addEventListener("click", textExample)


function textExample() {
  const p_array = document.getElementsByTagName("p");
  const count = p_array.length;
  for (let i = 0; i < count; i++) {
    const p = p_array[i];

    p.addEventListener("click", function() {
      document.getElementByClassName("tab").innerHTML = p.dataset.value
    })
  }
}
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: orangered;
  text-align: center;
  line-height: 30px;
  color: white;
}

.tab {
  display: none;
}
<body>

  <div class="container">

    <!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="background:orangered">Upload file</button> -->
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-body" style="text-align: center">
            <img style="width:90%; height:90%; align;" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
            <div style="margin-top: 15px;">
              <div id="myProgress">
                <div id="myBar">25%</div>
              </div>
              <div class="tab">
                <p data-value="One">Step 1</p>
              </div>
              <div class="tab">
                <p data-value="Two">Step 2</p>
              </div>
              <div class="tab">
                <p data-value="Three">Step 3</p>
              </div>
              <div class="tab">
                <p data-value="Four">Step 4</p>
              </div>

            </div>
            <button id="next">Next</button>

          </div>
        </div>
      </div>
    </div>
  </div>

标签： javascripthtml

解决方案

目前您的标签有display: none;，因此您必须display: block;通过内联样式添加才能显示它们。此外，您可以通过循环浏览包含所有选项卡的数组来简化答案。

var btn = document.querySelector('#next')
btn.addEventListener("click", move)
const p_array = document.querySelectorAll('.tab');

let current = 0;

var width = 25;

p_array[current].style.display = 'block';

function move() {
  var elem = document.getElementById("myBar");
  if (width < 100) {
    p_array[current].style.removeProperty('display');
    p_array[++current].style.display = 'block';
    width += 25;
    elem.style.width = width + '%';
    elem.innerHTML = width * 1 + '%';
  }
}
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: orangered;
  text-align: center;
  line-height: 30px;
  color: white;
}

.tab {
  display: none;
}
<body>

  <div class="container">

    <!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="background:orangered">Upload file</button> -->
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-body" style="text-align: center">
            <img style="width:90%; height:90%; align;" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
            <div style="margin-top: 15px;">
              <div id="myProgress">
                <div id="myBar">25%</div>
              </div>
              <div class="tab">
                <p data-value="One">Step 1</p>
              </div>
              <div class="tab">
                <p data-value="Two">Step 2</p>
              </div>
              <div class="tab">
                <p data-value="Three">Step 3</p>
              </div>
              <div class="tab">
                <p data-value="Four">Step 4</p>
              </div>

            </div>
            <button id="next">Next</button>

          </div>
        </div>
      </div>
    </div>
  </div>

推荐阅读