Only one table shows up with the information

Joined
Mar 29, 2023
Messages
1
Reaction score
0
Hello, can someone please help me with this code?

I have two tables (order History and Items Sold History) but when I run the code below only one table shows up. If I comment one of the functions out, the tables work individual.

I'm not sure what I am doing wrong and I feel like its something so simple.



<!DOCTYPE html>
<html>
<head>
<!--Page Tittle-->
<title> Uni-Thirft</title>

<!--Connects to the css file-->
<link href = "style3.css" rel ="stylesheet" type = "text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fontawesome.com/v6/docs/web/setup/get-started">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>



<div class="header">

<!-- Navigation Bar-->
<nav>
<!-- This is our logo picture-->
<a href ="homepage.html"><img src="media/logo1.png" class="logo"></a>
<a href ="homepage.html"><img src="media/logo2.png" class="logo2"></a>

<!-- Navigation Bar Items-->
<ul class="nav-links">
<!--All the header tabs-->
<li><a href="test1.html">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="about.html">About</a></li>
<li><a href="demographics.html">My Account</a></li>
<li><ion-icon name="cart-outline"></ion-icon></li>


</ul>
</nav>
</div>









<div class="container">

<!--Account Management option such as personal information, payment, orders, selling items-->
<div class="topbox">
<nav>
<a onclick="tabs(0)" class="tab0 active">
<i class="fa fa-user-circle" aria-hidden="true" title="User Demographics"></i>

</a>

<a onclick="tabs(1)" class="tab1">
<i class="fa fa-credit-card" aria-hidden="true" title="Payment"></i>

</a>

<a onclick="tabs(2)" class="tab2">
<i class="fa fa-shopping-basket" aria-hidden="true" title="Purchase History"></i>

</a>

<a onclick="tabs(3)" class="tab3">
<i class="fa fa-tags" aria-hidden="true" title="Items Being Sold"></i>

</a>

<a onclick="tabs(4)" class="tab4">
<i class="fa fa-history" aria-hidden="true" title="Items Sold"> </i>

</a>

</nav>

</div>




<!--Information on the bottom side of the screen(body) for profile-->
<div class="lowerbox">

<!--Class to get photo uploaded on profile-->
<!-- <div class="profile-photo">
<img src="media/logo1.png" id="photo">
<input type="file" id="file">
<label for="file" id="uploadBtn">Choose Photo</label>

</div>-->





<!--For the profile information-->
<div class="profile tabShow">

<h1> Personal Information </h1>
<!--<h2> ID</h2>
<input id ="enterID" type="text">-->
<h2> First Name </h2>
<input id ="enterFirstName" type="text" placeholder="Enter First Name">
<h2> Last Name </h2>
<input id ="enterLastName" type="text" placeholder="Enter Last Name">
<h2> Birthday</h2>
<input id="enterBirthday" type="text" placeholder="Enter Birthday">
<h2> Gender </h2>
<input id="enterGender" type="age" placeholder="Enter Gender">
<h2> UserName </h2>
<input id="enterEmail" type="text" placeholder="Enter User Name">
<h2> Password </h2>
<input id="password" type="password" value="brightcode">
<button id ="insert"> Insert/Update </button>

</div>





<!---------------------Start of Payment Information Tab------------------------>
<div class="payment tabShow">
<h1> Payment Information </h1>
<h2> Name on Credit Card </h2>
<input type="Text" class="input" value="Jorge M Torres ">
<h2> Credit Card Number </h2>
<input type="Text" class="input" value="0123 ** ** 4567 ">
<h2> Expiration Date </h2>
<input type="Text" class="input" value="01/02/2025">
<h2> CVV Number</h2>
<input type="Text" class="input" value="123">
<h2> Billing Address </h2>
<input type="text" class="input" value="123 4th Ave Bay Shore NY">
<button id ="btn"> Update </button>
</div>
<!---------------------Start of Payment Information Tab------------------------>






<!---------------------Start of Order History Tab------------------------------->
<div class="order tabShow">


<h1> Order History </h1>


<div>
<table class="t ">
<thead>
<tr>
<th>Order Number</th>
<th>Image</th>
<th>Date Purchased</th>
<th>Product Name</th>
<th>Price</th>
</tr>
</thead>


<tbody id = "tbody">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<!---------------------End of Order History Tab------------------------------->







<!------------------- Start of Items Being Sold Tab--------------------------->
<div class="selling tabShow">
<h1> Items Being Sold </h1>

<button id ="sellItemBtn" onclick="sellItem()" class="btn1"> Add New Item to Sell </button>
<h2> Name of Item </h2>
<input type="Text" class="input" placeholder="HTML, CSS Textbook">
<h2> Category </h2>
<input type="Text" class="input" placeholder="Textbook">
<h2> Condition </h2>
<input type="Text" class="input" placeholder="Used">
<h2>Price</h2>
<input type="Text" class="input" placeholder="9.99">


</div>
<!------------------- End of Items Being Sold Tab----------------------------->


<!--------------------Start of Products Already Sold Tab---------------------->
<div class="sold tabShow">
<h1> Items Sold </h1>

<div>
<table class="t">
<thead>
<tr>
<th>Product Name</th>
<th>Image</th>
<th>Upload Date</th>
<th>Price</th>
<th>Condition</th>
<th>Description</th>
</tr>
</thead>


<tbody id = "tbody1">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<!--------------------Start of Products Already Sold Tab---------------------->





<!----------JavaScript for the upload photo feature------
<script src="photo.js"></script>-->


</div>


</div>

<!--This top section is copied and pasted from our firebase page. -->
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyCboO05ASTNAeFOWdUARGE7MZYj7ZzxcEs",
authDomain: "uni-thrift.firebaseapp.com",
databaseURL: "https://uni-thrift-default-rtdb.firebaseio.com",
projectId: "uni-thrift",
storageBucket: "uni-thrift.appspot.com",
messagingSenderId: "562171645836",
appId: "1:562171645836:web:6c89d0a08fb9c35ab4d0a9"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


//this is needed to pull and save the data

import {getDatabase, ref, get, set, child, update, remove, push}
from "https://www.gstatic.com/firebasejs/9.17.1/firebase-database.js"; //The link aboved is copied here but the word app is replaced with database



const db = getDatabase();





/----------------Start of the Update page---------------/


var enterFirstName = document.querySelector("#enterFirstName");
var enterLastName = document.querySelector("#enterLastName");
var enterBirthday = document.querySelector("#enterBirthday");
var enterGgender = document.querySelector("#enterGender");
var enterEmail = document.querySelector("#enterEmail");
var password = document.querySelector("#password");



var insertBtn = document.querySelector("#insert");


function InsertData() {
set(ref(db, "User/"+ enterEmail.value),{
FirstName: enterFirstName.value,
LastName: enterLastName.value,
//ID: enterID.value,
Birthday: enterBirthday.value,
Gender: enterGender.value,
Email: enterEmail.value,
Password: password.value
})
.then(()=>{
alert("Data added successfully");
})
.catch((error)=>{
alert(error);
});
}



insertBtn.addEventListener('click', InsertData);




/----------------End of the Update page---------------/










/--------Start of Product Order History tab-----------/

var tbody = document.getElementById('tbody');

function AddItems(orderNum, image,date, product, price){
let trow = document.createElement("tr");
let td1 = document.createElement('td');


trow.appendChild(td1);
let td2 = document.createElement('td');
let td3 = document.createElement('td');
let td4 = document.createElement('td');
let td5 = document.createElement('td');

let img = document.createElement('img');
td1.innerHTML = orderNum;

img.src = image;
img.width = 100;
td2.appendChild(img);
td3.innerHTML = date;
td4.innerHTML = product;
td5.innerHTML = price;

trow.appendChild(td1);
trow.appendChild(td2);
trow.appendChild(td3);
trow.appendChild(td4);
trow.appendChild(td5);

tbody.appendChild(trow);



}

function AddAllItems(orderHistory){
tbody.innerHTML="";
orderHistory.forEach(element => {
AddItems(element.orderNumber,element.Product_Img_Url,element.date, element.productName, "$" + element.totalPrice);
});
}



function GetDataOnce(){
const dbRef = ref(db);


get(child(dbRef, "orders"))
.then((snapshot)=>{
var items = [];
snapshot.forEach(childSnapshot => {
items.push(childSnapshot.val());
});

AddAllItems(items);

});


}

window.onload = GetDataOnce;


/------------End of Product Order History tab-----------------/











/-----------Start of Items currently being <sold------------------/

/-----------End of Items currently being <sold------------------/










/-------------Start of the Products Sold History tab------------/

var tbody = document.getElementById('tbody1');

function AddSoldItems(productName, imag, uploadDate, prod, pri, desc){
let trow = document.createElement("tr");
let td1 = document.createElement('td');


trow.appendChild(td1);
let td2 = document.createElement('td');
let td3 = document.createElement('td');
let td4 = document.createElement('td');
let td5 = document.createElement('td');
let td6 = document.createElement('td');

let img = document.createElement('img');
td1.innerHTML = productName;

img.src = imag;
img.width = 100;
td2.appendChild(img);
td3.innerHTML = uploadDate;
td4.innerHTML = prod;
td5.innerHTML = pri;
td6.innerHTML = desc;

trow.appendChild(td1);
trow.appendChild(td2);
trow.appendChild(td3);
trow.appendChild(td4);
trow.appendChild(td5);
trow.appendChild(td6);

tbody.appendChild(trow);



}

function AddItemsSold(soldHistory){
tbody.innerHTML="";
soldHistory.forEach(element => {
AddSoldItems(element.productName, element.Product_Img_Url, element.uploadedDate, "$" + element.price, element.condition, element.description);
});
}

function GetAllDataOnce(){
const dbRef = ref(db);

get(child(dbRef, "soldHistory"))
.then((snapshot)=>{
var items2 = [];
snapshot.forEach(childSnapshot => {
items2.push(childSnapshot.val());
});

AddItemsSold(items2);
});


}
window.onload = GetAllDataOnce;


/-------------End of the Products Sold History tab------------/


</script>










<!--Footer starts-->
<footer class="footer">

<ul class="social-icon">
<li class="social-icon__item"><a class="social-icon__link" href="https://www.facebook.com/">
<ion-icon name="logo-facebook"></ion-icon>
</a></li>
<li class="social-icon__item"><a class="social-icon__link" href="https://twitter.com/">
<ion-icon name="logo-twitter"></ion-icon>
</a></li>
<li class="social-icon__item"><a class="social-icon__link" href="https://www.instagram.com/uni.thrift.1/">

<ion-icon name="logo-instagram"></ion-icon>
</a></li>
</ul>
<ul class="menu">
<li class="menu__item"><a class="menu__link" href="#">Home</a></li>
<li class="menu__item"><a class="menu__link" href="#">Products</a></li>
<li class="menu__item"><a class="menu__link" href="#">FAQ</a></li>
<li class="menu__item"><a class="menu__link" href="#">Contact</a></li>

</ul>
<p>&copy;2023 Uni-Thrift | All Rights Reserved</p>
</footer>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

<!--function below will make it where only information pertaining to each tab shows such as demographic icon will show name, address, etc but will not show payment information-->
<script>
const tabBtn = document.querySelectorAll(".tab");
const tab = document.querySelectorAll(".tabShow");

function tabs(panelIndex){
tab.forEach(function(node){
node.style.display = "none";

});
tab[panelIndex].style.display = "block";
}
tabs(0);


</script>
<!--Footer ends-->







</body>
</html>
 
Joined
Sep 4, 2022
Messages
129
Reaction score
16
hi !

never use a html native tag as 'id' or 'class' ... to avoid confusion and misreading,
---> tbody <--- is a native tag, find another 'id' or 'name' for this element.

---------------------------------------------------------------------

to add Text in an element, use 'innerText', you use "innerHtml = ". sure it works too, but innerHtml can add tags too.

----------------------------------------------------------------------
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,820
Messages
2,569,723
Members
45,510
Latest member
ThaliaMaxi

Latest Threads

Top