JavaScript/DOM - Помогите удалить мой встроенный JavaScript

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 (я предположим, вы отправить его на заднем конце после этого) опасно , его можно легко манипулировать.

Но если ваше намерение - это просто испытание или что-то в этом роде, все в порядке.

EDIT: для вызова этой функции вы могли бы сделать что-то вроде этого:

onclick="AddToCart(1)" 

Где 1 это ID вашей игрушки, вы должны изменить его на 2,3 ... в зависимости от вашей игрушки.