为什么我的按钮不起作用？ （HTML / JavaScript）的

Question

初学者在这里尝试通过使用后退和下一个按钮滚动照片来制作照片库。我的按钮不起作用，我不明白为什么。根据我的类似工作代码，它们应该是。

HTML：

<img src="TeamOrientation.jpg" width="400" height="300" alt="" id="gallery">

<button onclick="backward()">< Back</button>
<button onclick="forward()">Next ></button>

JavaScript：

var imgs = [{src: "Team Orientation 2.jpg"},
        {src: "WorkEthic.jpg"},
        {src: "Enthusiasm.jpg"}
        {src: "Enthusiasm (2).jpg"},
        {src: "DoItRight.jpg"},
        {src: "DoItRight (2).jpg"}
        {src: "Dependability.jpg"},
        {src: "Dependability (2).jpg"},
        {src: "TeamOrientation.jpg"}]

var imgIndex = 0;


function forward() {
        if (imgIndex > imgs.length || imgIndex < 0) {
            imgIndex = 0;
            document.getElementById('gallery').src = imgs[imgIndex].src;
        } else {
            document.getElementById('gallery').src = imgs[imgIndex].src;
        }
        imgIndex++;

}

function backward() {
    imgIndex--;
   if (imgIndex > imgs.length || imgIndex < 0) {
            imgIndex = 0;
            document.getElementById('gallery').src = imgs[imgIndex].src;
    } else {
        document.getElementById('gallery').src = imgs[imgIndex].src;
    }
}

当我点击按钮时，绝对没有任何反应。我也尝试在HTML中执行此操作：

<input type="button" value="< Back" id="back">
<input type="button" value="Next >" id="next">

，这在JavaScript中：

window.onload = function() {

   document.getElementById('back').onclick = backward;

   document.getElementById('next').onclick = forward;
};

也没有任何方法可以解决这个问题。我需要更改什么才能使按钮工作？根据我尝试过的所有内容，按钮只是不调用函数似乎是一个问题。我确保我的HTML知道在哪里可以找到JavaScript。这并不是说。

任何解决方案都必须使用JavaScript，而不是jQuery。

以下是实际网站的链接：

http://webpages.uncc.edu/dcarte50/Project/Products.html

此外，我的工作样本：

JavaScript的：

window.onload = function() {
    document.getElementById('btn1').onclick = changeImage;
    document.getElementById('btn2').onclick = changeImage;
    document.getElementById('btn3').onclick = changeImage;
    document.getElementById('btn4').onclick = changeStyle;
};

function changeImage() {

        var imgs = [{src: "http://www.dogslovewagtime.com/wp-content/uploads/2015/07/Dog-Pictures.jpg"},
                    {src: "http://splashanddashfordogs.com/wp-content/uploads/2014/07/Dog-2.jpg"},
                    {src: "http://www.dealsinqueens.com/Dog-9.jpg"}]

        if (this.id == 'btn1') {
            var newImage = imgs[0].src;
        }else if (this.id == 'btn2') {
            var newImage = imgs[1].src;
        }else{
            var newImage = imgs[2].src;
        }

        document.getElementById('myImage').src = newImage;
}

HTML：

  <div id="slideshow">
            <img src="http://i.ytimg.com/vi/KY4IzMcjX3Y/maxresdefault.jpg" width="400" height="300" alt="" name="myImage" id="myImage">
        </div>

        <div id="buttons">
            <input type="button" value="Image 1" id="btn1">
            <input type="button" value="Image 2" id="btn2">
            <input type="button" value="Image 3" id="btn3">
            <input type="button" value="Change Style" id="btn4">
        </div>

Answer 1

在上一个无效示例中，您的值为"Next >"。 HTML假设标签的末尾有>。相反，请使用>和<

的字符

列表：

< - '&lt;'

> - '>'

在您的第一个无效示例中，可能问题是设置onclick = "function();"。不要讨厌这个答案，那些支持和投票的人，因为我不经常使用这种方法。