如何让这个按钮触发适当的事件

Question

我正在尝试让我的滑块在我正在进行的测试中交互，但我就是想不通。我有一些我从 W3 中使用的代码，但我正在尝试为按钮添加几个事件，所以它们都在它自己的 javascript 文件中，而不是嵌入在 HTML.[=12 中=]

这里是 HTML:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="main.js" defer></script>

<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="./image_1.jpg" style="width:100%">
  <img class="mySlides" src="./image_2.jpg" style="width:100%">
  <img class="mySlides" src="./image_3.jpg" style="width:100%">

  <button id="clicker" class="w3-button w3-black w3-display-left">&#10094;</button>
  <button id="clicker" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>

</body>
</html>

这里是 Javascript:

let leftSlideButton = document.getElementById("clicker");
let rightSlideButton = document.getElementById("clicker");

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

let slideForward = plusDivs(1);
let slideBack = plusDivs(-1);

leftSlideButton.onclick = slideBack;
rightSlideButton.onclick = slideForward;

当脚本嵌入到 hmtl 中时，滑块可以工作，但是当我试图在它们自己的 javascript 文件中为按钮编写一些功能时，它就停止工作了，我现在很困惑。我将它们添加到自己的变量中并获取了它的 html 选择器，这样我就可以依次添加一个事件处理程序并将其 link 添加到函数中，但它不起作用。任何帮助，将不胜感激。

此外，这是我的第一个 post 如果格式不正确，请见谅。

TIA，尼尔。

Answer 1

很有可能是2 x id="clicker"引起的问题。使用 unique ids 作为按钮应该可以解决问题。

接下来，由于 slideIndex 全局声明它不需要 plusDivs 中间件。

为了更好的可读性，我还建议使用更清晰的函数和变量名称。检查这些：slideDivs vs showDivs、step vs n、slides vs x 等。听起来可能不大处理给定的例子，但这是一个好习惯，在处理更大的项目时会节省你很多时间。

还有一些小的优化可能，例如在一个循环中更改可见性和在滑动功能之外缓存幻灯片以避免在每次点击时再次选择它。检查片段以获取建议的重写代码。

var visibleSlideIndex = 0;
var slides = document.getElementsByClassName("mySlides");

function slideDivs(step) {
    visibleSlideIndex = (visibleSlideIndex + step + slides.length) % slides.length;
    for (let index = 0; index < slides.length; index++) {
        slides[index].style.display = visibleSlideIndex === index ? "block" : "none";
    }
}

document.getElementById("slideLeftBtn").onclick = () => slideDivs(1);
document.getElementById("slideRightBtn").onclick = () => slideDivs(-1);
slideDivs(0);

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="main.js" defer></script>

<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
 <img class="mySlides" src="./image_1.jpg" style="background-color: red;">
 <img class="mySlides" src="./image_2.jpg" style="background-color: green;">
 <img class="mySlides" src="./image_3.jpg" style="background-color: blue;">
  
 <button id="slideLeftBtn" class="w3-button w3-black w3-display-left">&#10094;</button>
 <button id="slideRightBtn" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>

</body>
</html>

Answer 2

您有多个问题：

首先，按钮选择。您正在尝试获取具有相同 ID 的 2 个按钮，您必须更改它。

然后，这两行：

let slideForward = plusDivs(1);
let slideBack = plusDivs(-1);

plusDivs(1) 和 plusDivs(-1) 正在调用函数并返回值。要修复它，您可以创建一个匿名函数（或箭头函数）来调用 plusDivs

这是一个固定版本（我将图像的宽度更改为 25%，以便在代码片段中更容易看到）：

let leftSlideButton = document.getElementById("clickerLeft");
let rightSlideButton = document.getElementById("clickerRight");

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}


leftSlideButton.onclick = () => plusDivs(1);
rightSlideButton.onclick = () => plusDivs(-1);

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://via.placeholder.com/150" style="width:25%">
  <img class="mySlides" src="https://via.placeholder.com/200" style="width:25%">
  <img class="mySlides" src="https://via.placeholder.com/250" style="width:25%">

  <button id="clickerLeft" class="w3-button w3-black w3-display-left">&#10094;</button>
  <button id="clickerRight" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>

Answer 3

你不能有两个相同的 ID，所以我给了按钮单独的 ID，然后我用 addEventListener 为每个按钮附加了一个事件监听器。在每个监听器中我直接添加了 plusDivs() 函数。

let leftSlideButton = document.getElementById("clicker-left");
let rightSlideButton = document.getElementById("clicker-right");

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

leftSlideButton.addEventListener("click",  () => {plusDivs(1)});
rightSlideButton.addEventListener("click", () => {plusDivs(-1)});

.w3-content > img{
   max-height: 200px;
   object-fit: contain;
   background-color: lightblue;
}

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="http://placekitten.com/100/200" style="width:100%">
  <img class="mySlides" src="http://placekitten.com/200/200" style="width:100%">
  <img class="mySlides" src="http://placekitten.com/150/200" style="width:100%">

  <button id="clicker-left" class="w3-button w3-black w3-display-left">&#10094;</button>
  <button id="clicker-right" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>

如何让这个按钮触发适当的事件

How to get this button to fire the appropriate event

html

javascript

function

event-handling