Question

我有一个带有两个按钮的onclick事件。按钮1应该使产品向后循环到上一个项目。按钮2应该做相反的事情。但是，他们没有做应做的事情。

HTML：

 'use strict';
    
    var minProduct = 1;
    var maxProduct = 3;
    var currentProduct = 1;
    
    var products = [
        {
            'title': 'Test Title',
            'desc': 'Lorem ipsum dolor, sit amet consectetur adipisicing elit.Excepturi, necessitatibus nihil animi possimus quisquam laudantium sunt corporis nulla soluta nam.  Lorem ipsum dolor, sit amet consectetur adipisicing elit.Excepturi, necessitatibus nihil animi possimus quisquam laudantium sunt corporis nulla soluta nam.'
        },
        {
            'title': 'Test Title2',
            'desc': '2Lorem ipsum dolor, sit amet consectetur adipisicing elit.Excepturi, necessitatibus nihil animi possimus quisquam laudantium sunt corporis nulla soluta nam.  Lorem ipsum dolor, sit amet consectetur adipisicing elit.Excepturi, necessitatibus nihil animi possimus quisquam laudantium sunt corporis nulla soluta nam.'
        },
        {
            'title': 'Test Title3',
            'desc': '3Lorem ipsum dolor, sit amet consectetur adipisicing elit.Excepturi, necessitatibus nihil animi possimus quisquam laudantium sunt corporis nulla soluta nam.  Lorem ipsum dolor, sit amet consectetur adipisicing elit.Excepturi, necessitatibus nihil animi possimus quisquam laudantium sunt corporis nulla soluta nam.'
        },
    ];
    
    function updateText(productNumber) {
        var obj = products[productNumber-1];
        var title = document.getElementById("title");
        var desc = document.getElementById("desc");
        title.innerHTML = obj.title;
        desc.innerHTML = obj.desc;
    };
    
    
    document.getElementById('back').onclick = function() {
        console.log('back');
        if (!currentProduct == minProduct){
            currentProduct = currentProduct--;
            updateText(currentProduct);
        };
    };
    
    document.getElementById('forward').onlick = function() {
        if (!currentProduct == maxProduct){
            currentProduct = currentProduct++;
            updateText(currentProduct);
        };
    };

<div class="nav clearfix">
    <img src="./logo.png" class="nav-title" alt="Daicicle's Combos" width="105x">
    <nav>
        <ul>
        </ul>
    </nav>
</div>
<h1 class="title">Store.</h1>


<div class="product">
    <h2 class="product-title" id="title">Test Title</h2>
    <p class="product-desc" id="desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit.Excepturi, necessitatibus nihil animi possimus quisquam laudantium sunt corporis nulla soluta nam.  Lorem ipsum dolor, sit amet consectetur adipisicing elit.Excepturi, necessitatibus nihil animi possimus quisquam laudantium sunt corporis nulla soluta nam.</p>
    <ul class="product-btn-ul">
        <li><button class="product-btnz btn-go" id="back">&lt;</button></li>
        <li>
            <button class="product-btn purchase">Buy</button>
        </li>
        <li><button class="product-btnz btn-go" id="forward">&gt;</button></li>
    </ul>
</div>

不确定是否需要CSS，如果需要，请注释并添加错误。

控制台没有错误。 onclicks已正确测试。

Answer 1

已解决，带有注释帮助。解决方案：

将其拼写为onlick，而不是onclick
您应该写currentProduct = currentProduct++与currentProduct++;相同，而不是currentProduct--
if (!currentProduct == minProduct)您正在寻找if (currentProduct !== minProduct)

评论员：

LGSon
chevybow
soktinpk
乔登

Answer 2

检查以下代码段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Daicicle's Combos</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="icon" 
      type="image/png" 
      href="./favicon.ico">
    <script type="text/javascript">
      'use strict';

var minProduct = 1;
var maxProduct = 3;
var currentProduct = 1;
var products = [
    {
        'title': 'Test Title',
        'desc': 'Lorem ipsum dolor, sit amet consectetur adipisicing elit.Excepturi, necessitatibus nihil animi possimus quisquam laudantium sunt corporis nulla soluta nam.  Lorem ipsum dolor, sit amet consectetur adipisicing elit.Excepturi, necessitatibus nihil animi possimus quisquam laudantium sunt corporis nulla soluta nam.'
    },
    {
        'title': 'Test Title2',
        'desc': '2Lorem ipsum dolor, sit amet consectetur adipisicing elit.Excepturi, necessitatibus nihil animi possimus quisquam laudantium sunt corporis nulla soluta nam.  Lorem ipsum dolor, sit amet consectetur adipisicing elit.Excepturi, necessitatibus nihil animi possimus quisquam laudantium sunt corporis nulla soluta nam.'
    },
    {
        'title': 'Test Title3',
        'desc': '3Lorem ipsum dolor, sit amet consectetur adipisicing elit.Excepturi, necessitatibus nihil animi possimus quisquam laudantium sunt corporis nulla soluta nam.  Lorem ipsum dolor, sit amet consectetur adipisicing elit.Excepturi, necessitatibus nihil animi possimus quisquam laudantium sunt corporis nulla soluta nam.'
    },
];

function updateText(productNumber) {
  console.log('product #' + productNumber);
  console.log(JSON.stringify(products[productNumber-1]));
    var obj = products[productNumber-1];
    var title = document.getElementById("title");
    var desc = document.getElementById("desc");
    title.innerHTML = obj.title;
    desc.innerHTML = obj.desc;
};



updateText(currentProduct);
document.getElementById('back').onclick = function() {
    if (currentProduct !== minProduct){
        currentProduct--;
        updateText(currentProduct);
    };
};

document.getElementById('forward').onclick = function() {
  console.log('forward');
    if (currentProduct !== maxProduct){
        currentProduct++;
        updateText(currentProduct);
    };
};
  </script>
</head>
<body>
    <div class="nav clearfix">
        <img src="./logo.png" class="nav-title" alt="Daicicle's Combos" width="105x">
        <nav>
            <ul>
            </ul>
        </nav>
    </div>
    <h1 class="title">Store..</h1>


    <div class="product">
        <h2 class="product-title" id="title">Test Title</h2>
        <p class="product-desc" id="desc"></p>
        <ul class="product-btn-ul">
            <li><button class="product-btnz btn-go" id="back">&lt;</button></li>
            <li>
                <button class="product-btn purchase">Buy</button>
            </li>
            <li><button class="product-btnz btn-go" id="forward">&gt;</button></li>
        </ul>
    </div>
    <script src="./product.js"></script>
</body>
</html>

这里有密码笔-> https://codepen.io/masankar/pen/VEvLgv

简单的onclick事件未达到预期的效果

2 个答案: