Question

成为JavaScript新手我无法找到解决此问题的方法。

我希望每个“添加到购物车”按钮调用相同的功能“AddtoCart”。我已经实现了这一点，但是以内联JavaScript为代价 - 我想避免这种情况。

onclick= "AddToCart(document.getElementById('toy_title1').innerHTML,document.getElementById('toy_quantity1').value,document.getElementById('toy_price1').innerHTML)

那么我将如何将其作为外部JavaScript文件的一部分来实现，请记住我必须能够将其应用于所有4个独特的项目

Answer 1

然后你应该阅读更多关于addEventListener（标准）和attachEvent（IE）的信息

//assume element means the button
//you can use getElementsByTagName, getElementsByClassName, querySelectorAll etc.
//to fetch your elements

//DRY, store the operation in a function so it's reusabe and not written twice
function thisFunction(){
    AddToCart(document.getElementById('toy_title1').innerHTML,
        document.getElementById('toy_quantity1').value,
        document.getElementById('toy_price1').innerHTML)
}

if(element.addEventListener){                      //check if the standard is supported
    element.addEventListener('click',function(){   //use it to add the handler
        thisFunction();
    });
} else {
    element.attachEvent('onclick',function(){      //else, we use IE's version
        thisFunction();
    }, false);
}

Answer 2

你可以这样改变你的功能：

function AddToCart(toyId) {
  var title = document.getElementById('toy_title'+toyId).innerHTML;
  var quantity = document.getElementById('toy_quantity'+toyId).value;
  var price = document.getElementById('toy_price')+toyId).innerHTML
}

然后在每个按钮上，您只需传递玩具的ID

只关注价格这样的敏感数据，将其留在Javascript上（我假设你将它发送到你的后端）是危险的，它很容易被操纵。

但如果你的意图只是一个测试或类似的事情，那就好了。

编辑：要调用你的这个函数，你会做类似的事情：

onclick="AddToCart(1)"

如果您的玩具ID为1，则应根据您的玩具将其更改为2,3 ......

JavaScript / DOM - 帮助删除我的内联JavaScript

2 个答案: