What are some ways to personalize my HTML code within a JS script?

Here is the content of my profile.js:

profileContainer.innerHTML = 
`
<div class="col-md-12">
    <section class="jumbotron my-5">

        <h3 class="text-center">First Name: ${data.firstName}</h3>
        <h3 class="text-center">Last Name: ${data.lastName}</h3>
        <h3 class="text-center">Email: ${data.email}</h3>
        <h3 class="text-center">Contact Number: ${data.mobileNo}</h3>
        <h3 class="mt-5">Class History</h3>
        <table class="table">
            <thead>
                <tr>
                    <th> Course Name </th>
                    <th> Enrolled On </th>
                    <th> Status </th>
                </tr>
            </thead>
            <tbody id="coursesContainer"></tbody>
            </table> 
        </section>
    </div>
`

And this is what I have in my profile.html:

<main class="container my-5">
    <div id="profileContainer" class="row">
        <div class="col-md-12">
            <section class="jumbotron text-center my-5">        
                <h2 class="my-5"><span class="spinner-border text-primary"></span> Fetching User 
               Details...</h2>
            </section>
        </div>
    </div>
    <!-- end row -->
</main>

The expected output can be viewed here: profile

I attempted to change the background color of the profile from gray to a different color, however, editing the profileContainer via style.css only alters the color of the outer border. Any assistance on this matter would be greatly appreciated.

javascripthtmlcss

Answer №1

To update the entire page by replacing the existing HTML code, you must include a button to trigger the page update event. Without this button, user interaction will not be possible.

Add a button within the <main> tag:

<main class="container my-5">
    <div id="profileContainer" class="row">
        <div class="col-md-12">
            <section class="jumbotron text-center my-5">        
                <h2 class="my-5"><span class="spinner-border text-primary"></span> Fetching User 
               Details...</h2>
        <button onclick="myfunction()">click me</button>
            </section>
        </div>
    </div>
    <!-- end row -->
</main>

Your JavaScript function should be updated as follows:

function myfunction() {
document.getElementById("profileContainer").innerHTML="<div class="col-md-12">
<section class="jumbotron my-5">
  <h3 class="text-center">First Name: ${data.firstName}</h3>
    <h3 class="text-center">Last Name: ${data.lastName}</h3>
    <h3 class="text-center">Email: ${data.email}</h3>
    <h3 class="text-center">Contact Number: ${data.mobileNo}</h3>
    <h3 class="mt-5">Class History</h3>
    <table class="table">
        <thead>
            <tr>
                <th> Course Name </th>
                <th> Enrolled On </th>
                <th> Status </th>
            </tr>
        </thead>
        <tbody id="coursesContainer"></tbody>
        </table> 
    </section>
</div>" ;  
}

Answer №2

To select classes or IDs defined in JS, you can use the same approach as targeting any other HTML elements. Depending on the particular element you want to style on the webpage, consider selecting .jumbotron.

It is challenging to give precise guidance without examining the existing CSS to determine which elements are currently styled (e.g., identifying the class responsible for the gray background and border radius).

Answer №3

Our approach involves assigning an id or class to the element and coding the corresponding CSS in the stylesheet. This method is simple yet effective for resolving the issue at hand.

Answer №4

To modify a specific HTML element, assign it an ID and utilize the JavaScript method getElementById() for selection, then update its content using the innerHTML property.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue: Utilizing computed properties to monitor changes in offsetHeight of elements

I am working on a component that requires an array of 50 objects to be passed as a prop. <template> <div v-for="(item,index) in items" ref="items" :key="index"gt; // </div> </template> props: ...

javascriptvue.jsvuejs2

Sending user data through JavaScript variables in a URL

I have been attempting to pass a JavaScript variable to a PHP page through the URL. The current code successfully triggers the PHP page, but unfortunately, it is not receiving the variable. I previously used window.location.href which worked well, but it h ...

javascriptphp

Adding new elements to a key in MongoDB ($addToSet)

In my mongoose schema, I have defined a structure like this: var listingSchema = new Schema({ street : String, buildingNumber : Number, apartmentNumber : Number, UsersAndQuestions: [{ userID: { type: ...

javascriptjsonnode.jsmongodbmongoose

Highcharts' 'this' function yielding duplicate objects

I am struggling with using the tooltip pointFormatter in Highcharts to display this.name just once. However, I am facing an issue where the same object is being returned twice, causing it to appear duplicated in the tooltip. You can view the problem in ac ...

javascriptjquerychartshighcharts

HTML 5 functions properly when loaded directly as a .html file, but encounters issues when hosted on either a Django or Node

I'm having trouble getting a video to play on a webpage. Initially, I followed a standard example I found online by using the following code: <video src='video.mp4' controls></video> When I open the .html file in Safari and dou ...

djangonode.jshtmlvideo

When nearing the edge of the window, extend the submenu in the opposite direction

I've created a simple submenu using CSS, structured as an unordered list. It appears on hover by changing the display property to "block". <ul> <li><a href="#">item</a></li> <li><a href="#">item</a ...

jquerycss

Modify the class and color of a Font Awesome icon when clicked

My goal is to change the class and color of an icon when it is clicked. Here is the code I am using: $(".sim-row-edit-icon").click(function(){ alert("Icon clicked"); // on click please change icon and color to red }); <link href="https://stackpath. ...

javascriptjqueryhtmlcssfont-awesome

What is the best way to save a variable once data has been transferred from the server to the client

When I send the server side 'data' to the client, I'm facing an issue where I can't store the 'data' into a variable and it returns as undefined. What could be causing this problem and how can I fix it? The request is being ...

javascriptnode.jsexpressclient-serverfetch

Determine if the search query is present in the JSON data using React.js

I'm attempting to determine if the client did not receive any search results, but I am encountering an issue with using useState as it leads to an infinite loop each time a character is typed. Code: const [searchExist, setSearchExist] = useState(false ...

javascriptreactjs

When attempting to log an AJAX/JSON request, the console.log statement is displaying 'undefined'

Being new to AJAX, I have encountered an issue that I believe others may have faced as well. Despite numerous attempts and extensive research, I am unable to find a solution to this error. I am confident that it is something simple. Any help would be gre ...

javascriptjsonajax

Troubleshooting dynamic ng-src not functioning properly with Angular JS version 1.2.0-rc.2

I'm currently facing an issue while trying to incorporate a video element into my Angular JS app. The ng-src is not recognizing the scope variable that I have set. The version of AngularJS I am using is 1.2.0-rc.2 <!DOCTYPE html> <html ng-a ...

javascriptangularjs

Modifying<strong>superscript</strong> design

Is there a way to change the style of <sup> elements using CSS without removing them from the HTML code? I want to make them look like regular text. Basically, I want the result of <div>Some <sup>random</sup> text.<div> to ...

htmlcss

Can someone explain the inner workings of the Typescript property decorator?

I was recently exploring Typescript property decorators, and I encountered some unexpected behavior in the following code: function dec(hasRole: boolean) { return function (target: any, propertyName: string) { let val = target[propertyName]; ...

javascriptangulartypescriptjavascript-objects

Avoid insecurely assigning an any value in TypeScript

Take a look at this code snippet: const defaultState = () => { return { profile: { id: '', displayName: '', givenName: '', }, photo: '', } } const state = reactive(defaultState() ...

javascripttypescripteslint

Making sure the checkbox stays selected in an angular environment

After experimenting with Angular 9 and a custom input, I achieved the following result => https://stackblitz.com/edit/angular-ivy-rgsatp My goal was to prevent users from disabling a radio button that is currently checked. Therefore, I made changes in ...

javascripthtmlangular

Encountering difficulties linking to a stylesheet or a script in an HTML file delivered by Express server

Currently, I'm facing the challenge of breaking down my Express app code into multiple files. Unfortunately, I am unable to utilize <link href> or <script src> for linking stylesheets or scripts. Below is the relevant snippet from my inde ...

javascripthtmlcssnode.jsexpress

Vue: setInterval not updating timer variable

Here is my code for updating and displaying the number of elapsed seconds: <template> <div> {{timerValue}} </div> </template> <script> export default { name: "App", components: { }, da ...

javascriptvue.jsvuejs3

Text-field input experiencing issues with placeholder display

As a beginner in Angular, I may make some mistakes. I created a textField input using a directive in Angular: .directive('textField', function () { return { restrict: 'E', scope: true, require: 'ngModel ...

javascriptangularjs

The function to toggle each element in the array is malfunctioning

I am working on a Vue.js project where I have a table filled with data from the back-end. Currently, all the fields are displayed in the table as they are copied from the database structure object. However, I want to add functionality to manage which fie ...

javascriptlaravelvue.jsvuejs2

"Create a stunning backdrop with animated wave effects using JavaScript

I am currently using three.js to create a waves canvas animation, but I am unsure how to eliminate the background-color (only the background-color) of the canvas. if (WEBGL.isWebGLAvailable() === false) { document.body.appendChild(WEBGL.getWebGLErrorMes ...

javascripthtmlthree.js