JavaScript for auto generation of Div

44 views

Skip to first unread message

Syed Munawer Hassan

unread,

Jan 15, 2023, 5:21:43 AM1/15/23

to DroidScript

Can anybody shorten this code in javascript

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<p id="Total1">Total Price :</p>

</div>

<br>

<p id="Total2">Total Price :</p>

</div>

<br>

<p id="Total3">Total Price :</p>

</div>

<br>

<p id="Total4">Total Price :</p>

</div>

<br>

<p id="Total5">Total Price :</p>

</div>

<br>

<p id="Total6">Total Price :</p>

</div>

document.getElementById("textboxId").addEventListener("change", function(){

// code to be executed when the textbox value changes

});

Rates = [15,20,55,88,98,100];

function ShowRates(){

if (document.getElementById("S1").value!=""){

var a = parseInt(document.getElementById("S1").value);

document.getElementById("Total1").innerText= "Total Price : " + (a * 15)//parseInt(Rates[0]));

}

if (document.getElementById("S2").value!=""){

var a = parseInt(document.getElementById("S2").value);

document.getElementById("Total2").innerText= "Total Price : " + (a * Rates[1]);

}

if (document.getElementById("S3").value!=""){

var a = parseInt(document.getElementById("S3").value);

document.getElementById("Total3").innerText= "Total Price : " + (a * Rates[3]);

}

if (document.getElementById("S4").value!=""){

var a = parseInt(document.getElementById("S4").value);

document.getElementById("Total4").innerText= "Total Price : " + (a * Rates[4]);

}

if (document.getElementById("S5").value!=""){

var a = parseInt(document.getElementById("S5").value);

document.getElementById("Total5").innerText= "Total Price : " + (a * Rates[5]);

}

if (document.getElementById("S6").value!=""){

var a = parseInt(document.getElementById("S6").value);

document.getElementById("Total6").innerText= "Total Price : " + (a * Rates[5]);

}

</script>

</body>

</html>

Symbroson

unread,

Jan 15, 2023, 6:06:41 AM1/15/23

to DroidScript

I asked chatgpt to create a data list and dynamically create the container elements

this is what it came up with.

you might need to adjust it to your specific needs in some locations but its a very good starting point:

Here is a simple example of a list of data elements in javascript and a loop that will dynamically create the HTML.

Here is a simple example of a list of data elements in javascript and a loop that will dynamically create the HTML.

// List of data elements
const products = [
{
id: 1,
name: "Salt",
image: "1.png",
price: 1,
unit: "KG"
},
{
id: 2,
name: "Sugar",
image: "2.png",
price: 2,
unit: "KG"
},
{
id: 3,
name: "Rice",
image: "3.png",
price: 3,
unit: "KG"
}
];

// Loop through the data and create the HTML
let html = "";
for (let i = 0; i < products.length; i++) {
html += `<div class="card" style="width:400px">
<img class="card-img-top" src="${products[i].image}" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">${products[i].name} 5 ${products[i].unit}</h4>
<p class="card-text">$ ${products[i].price} / ${products[i].unit}</p>
<input type="number" name="" id="S${i+1}" onchange="ShowRates()">
<p id="Total${i+1}">Total Price :</p>
</div>
</div>`;
}

// Add the HTML to the container
document.querySelector('.container').innerHTML = html;

This will dynamically create the HTML for each product in the list, and add it to the container element in the HTML.

Reply all

Reply to author

Forward

0 new messages