var libros = [];
libros[0] = ["img/libro1.jpg", "Calcetines Rotos", 16.5];
libros[1] = ["img/libro2.jpg", "Patria", 21.80];
libros[2] = ["img/libro3.jpg", "Los ritos del agua", 20.00];
libros[3] = ["img/libro4.jpg", "El extraño verano de Tom Harvey", 15.90];
libros[4] = ["img/libro5.jpg", "La Habitacion en llamas", 16.00];
libros[5] = ["img/libro6.jpg", "El secreto de Ile-De-Sein", 21.8];
libros[6] = ["img/libro7.jpg", "Ocho días de Marzo", 15.90];
libros[7] = ["img/libro8.jpg", "Cinco días de Octubre", 15.90];
var div = document.getElementById("contenedorlibro")
, titulo = div.getElementsByTagName("h3")
, img = div.getElementsByTagName("img")
, precio = div.getElementsByTagName("p");
var salida = "";
function multiple(valor, multiplo) {
resto = valor % multiplo;
if (resto == 0) return true;
else return false;
}
//Añadir div's con el contenido del producto segun la array de libros.
for (i = 0; i < libros.length; i++) {
if (i == 0) {
salida += "<div class='row'>";
}
else if (i != 0 && multiple(i, 4)) {
salida += "</div>\n<div class='row'>";
}
salida += "<div class='col-md-3 producto col-xs-12 col-sm-6'> <img alt='Libro 1' src='"
+ libros[i][0] +
" ' class='img-rounded' style='width:50%' ><h3 class='text-primary text-center'>"
+ "<b>Título:</b> " + libros[i][1] +
"</h3><p class='precios'>" + "€"
+ libros[i][2] +
"</p><button id='comprar"
+ i +
"' onClick='add(this)' type='button' class='btn btn-primary active btn-default compra'> Comprar </button></div>";
}
if (i != 0) {
salida += "</div>";
}
div.innerHTML = salida;
var row = ""
,preciosuma = 0
,ref
,des=0
,coniva=0
,total=0;
function add(boton) {
var pos = boton.id.split("comprar")
indice = pos[1]
tablacompra = document.getElementById("tablacompra")
numtr = tablacompra.getElementsByTagName("tr")
precio = 0;
ref = numtr.length + 1;
row += '<tr class="active carrito"><td>'
+ ref +
' </td><td>'
+ libros[indice][1] +
' </td><td> € '
+ libros[indice][2] +
' <button type="button" onClick="quitarlibro()">Quitar</button>';
document.getElementById(boton.id).setAttribute("disabled", "disabled"); //Deshabilita boton de comprar
tablacompra.innerHTML = row;
precio = libros[indice][2];
preciosuma = preciosuma + precio;
//Llama a las siguientes funciones que aparecerán en la tabla de precios finales.
descuento();
iva();
totalprecio();
tablaprecios();
}
function totalprecio() {
total = (preciosuma-des)+coniva;
}
function iva() {
coniva = (preciosuma - des)*0.21;
}
function descuento() {
if (ref >= 3 && ref<5) {
des = preciosuma * 0.05;
}
if (ref >= 5 && ref<7){
des = preciosuma * 0.075;
}
if (ref >= 7){
des = preciosuma * 0.1;
}
return des;
}
function tablaprecios(){
var tablaprecios = document.getElementById("tablaprecios"),
columnas = tablaprecios.getElementsByTagName("td");
columnas[1].innerHTML = preciosuma.toFixed(2) + " €";
if (ref >= 3 && ref<5 ){
columnas[3].innerHTML = des.toFixed(2) + " (-5%)";
}
if (ref >= 5 && ref<7){
columnas[3].innerHTML = des.toFixed(2) + " (-7.5%)";
}
if (ref >= 7){
columnas[3].innerHTML = des.toFixed(2) + " (-10%)";
}
columnas[5].innerHTML = coniva.toFixed(2) + " (21%)";
columnas[7].innerHTML = total.toFixed(2) + " €";
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Comprar Libros Online</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h3>Compra online de libros</h3>
</div>
</div>
<div id="contenedorlibro">
</div>
<div class="row">
<div class="col-md-12" style="border-bottom: 1px solid #ccc; margin-bottom: 30px;">
<h3>Carrito de Compras:</h3>
</div>
</div>
<div class="row carritocompra">
<div class="col-md-6">
<table class="table table-condensed">
<tr>
<th>Num</th>
<th>Producto</th>
<th colspan="2">Precio</th>
</tr>
<tbody id="tablacompra">
</tbody>
</table>
</div>
<div class="col-md-6">
<table id="tablaprecios" class="table table-condensed" style="margin-top: 30px;">
<tr>
<td>Total Compra:</td>
<td></td>
</tr>
<tr class="active">
<td>Descuento: </td>
<td></td>
</tr>
<tr class="active">
<td>IVA: (21%) </td>
<td></td>
</tr>
<tr class="success">
<td>Importe Total: </td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>I'm doing a shopping cart exercise by javascript and I can not do the function of removing an object added to the cart, I apply a "remove" button but I'm lost in what function I have to do to remove the object and re-enable its corresponding purchase button, thank you very much in advance