Looking for assistance with my school project, which involves creating a booking system for a cinema. I have used an array to generate the chairs but am unsure how to assign each button its own ID.
Here is the code snippet in question:
function chair(){
for( i = 1 ; i <= 10; i = i + 1 ){
if ( i > 3 && i < 8 ){
document.write("<button>button</button>");
}else{
document.write("<button>hi</button>");
}
}
}
If you want to create a button dynamically, you can use the following code:
document.write("<button id=btn" + i + ">button</button>");
Here are some additional points to consider:
It's important to declare your variables explicitly to avoid implicit globals. You should define the i variable before using it.
In programming, it is common practice to start counting from 0 instead of 1. So when iterating in a loop, begin with 0 like this:
for (i = 0; i < 10; i = i + 1)
Although it's not mandatory, it is the standard approach in many programming languages.
You can simplify incrementing i by using ++i or i++ instead of i = i + 1:
for (i = 0; i < 10; ++i)
This syntax is more commonly used and considered cleaner.
While document.write works for small tasks, it's recommended to utilize the DOM manipulation methods for real-world applications. Here's an example using DOM:
var btn = document.createElement("button");
btn.id = "btn" + i;
document.body.appendChild(btn);
I hope these tips help as you continue learning...
function table()
{
var ID = 0;
for( j = 1 ; j <= 10; j = j + 1 )
{
if ( j > 5 && j < 9 ){
document.write("<button id=btn"+id+">click me</button>");
} else{
document.write("<button id=btn"+id+">hello</button>");
}
id++;
}
}
let identifier=0;
for( number = 1 ; number <= 10; number = number + 1 )
{
if ( number > 3 && number < 8 )
{
document.write("<button id="+identifier+">button</button>");
identifier++;
}
else
{
document.write("<button id="+identifier+">hi</button>");
identifier++;
}
}
It is not recommended to use document.write. Consider the following alternative approach:
function createButtons() {
for (var i = 0; i < 10; i++) {
var button = document.createElement("button");
button.id = "btn" + i; // set the id
button.innerHTML = (i > 3 && i < 8) ? "Button" : "hi";
document.body.appendChild(button);
}
}
Update: I have made improvements based on T.J.Crowder's recommendations in his notes.
I've developed a number keypad with Javascript. Each time a button is clicked, the following actions are taken: List of buttons: <input type="button" value="2' class="num-key" onclick="insertvalue(this.value)"> <input type="button" valu ...
Seeking guidance on a URL issue that I am facing. Whenever I click the source link, it adds a pound sign to the URL. How can I prevent this from happening? Can someone assist me in identifying the necessary changes required in my jQuery or HTML code? Bel ...
Trying to understand the transition to async/await in Hapi 17 is a bit of a challenge for me. My main focus is figuring out how to modify an abstracted route to make it compatible with async/await. Here is a snippet from my routes\dogs.js file: con ...
Encountering an issue when trying to bind Json data into ng-model within ng-repeat. html : <div ng-controller="Ctrl"> <div> <table> <th> <td>add</td> <td>ed ...
How can RTL (Right-to-Left) support be effectively implemented in React applications? Is there a method to customize default <p> and <span> components for RTL support without the need to rewrite existing components? For instance, using a global ...
Could someone please assist me with checking a radio button? Below is the code for the radio button list: <div class="md-radio-list"> <label class="md-radio" id="@ch.AnswerId"> <input name="@ch.QuestionId" onclick="handlesClick(this); ...
In the component template, I have grouped multiple Inputs and their events like this: <tr (input)="onSearchObjectChange($event)"> <th><input [(ngModel)]="searchObject.prop1"></th> <th><input [(ngModel)]="searchObje ...
I've been attempting to send an HTTP request using the AngularJS $http service like this: $http.get('http://myserver:8080/login?', { params: {username: "John", password: "Doe" }, headers: {'Authorization': ...
Is there a way for me to filter certain words (such as "sex") using regex, even when people use variations like "b a d", "b.a.d", or "b/a/d"? How can I prevent these kinds of words from getting through? I'm trying to filter more than just one word - ...
I am working with an array of values and I want to return an object that uses each value in a promise. This is the code I have: const exampleArray = serieses.map(async x => { const seriesId = await getSeriesIDFromName(x); return { part_id: pa ...
I've been working on a website for my client that works perfectly fine in Chrome, Firefox, Microsoft Edge, and even Internet Explorer :P. However, I'm facing some issues with Safari. Here's a snippet of the code I used: <html> <hea ...
let canvas = document.createElement('canvas'); let context = canvas.getContext( '2d' ); context.drawImage( video, 0, 0 ); let image_src = canvas.toDataURL('image/jpeg'); let dataURL = canvas.toDataURL("image/jpeg"); let image= ...
Looking to retrieve the latest 8 products based on their date? Take a look at the code snippet below: const newestProducts= []; axios.get("http://localhost:3003/products").then(response => { let products = response.data.sort(fu ...
Recently, I encountered an issue while working on a website using astro (). When running astro preview, I encountered an error. Here is the code from my astro.config.mjs file: import { defineConfig } from 'astro/config'; import vercel from ' ...
When I click a button, I am invoking a JavaScript function from the child ASPX page. function closeChildWindow() { window.opener.document.forms(0).submit(); self.close(); } This code snippet closes the child page and tri ...
Having just embarked on my journey with jquery, I am giving it my all. Within my asp.net mvc project, there is a page filled with x-editable inputs. I decided to create a simple button: <input type="button" class="btn btn-info" id=& ...
We are experiencing difficulties in reading a json file containing html content. Here is the code snippet with the json data we are working with: Json data: { "aboutContent": { "listItems": [{ "title": "Investors", "de ...
One of my requirements involves having a Radgrid where all rows are always in edit mode. Specifically, I am looking to implement a functionality in one of the columns where after an item is edited, all rows in that column should take on the same value. Her ...
New to Vue and need some guidance... I'm having trouble accessing the values in a JS object displayed in the DevTools within one of my routes in a Vue app. Specifically, how can I display the values from filteredData:Array[1]? https://i.sstatic.net/ ...
I'm facing an issue while trying to create a nextjs project with PDFViewer using @react-pdf-viewer. The error I encountered is "SyntaxError: Unexpected token '||=' when collecting pages. This problem seems to be originating from pdf.js in t ...