Ways to implement CSS with javascript

I'm using PHP to retrieve data from my database and then leveraging Javascript to enable users to add it. However, I am facing challenges in making a div change its background color and apply borders.

<div class="displayedItems"></div>
<script type="text/javascript">
   $('#addButton').on('click', function( event ) {
        $('.displayedItems').append($('#search_term').val() + '<br>'); 
   });          
</script>
<style type="text/css">
   .displayedItems{
       background-color: yellow;
       margin-top: 50px;
   }
</style>

Your assistance on this issue would be highly appreciated.

Answer №1

$('#addButton').click(function( event ) {
                var term = $('#search_term').val(); 
                var container = $('.selectedItems'); 
                container.append(term + '<br>').css({
                    'background-color': 'orange',
                    'margin-top': '70px'
               }); 
           });

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

Troubleshooting the issue with the default dropdown select in AngularJS

var jsonData ='[ {"type":"product", "id":1,"label":"Color", "placeholder":"Select Jean Color", "description":"", "defaultValue":"Brown", "choices":[{ "text":"Denim", "price":"$0.00", "isSel ...

The description in the lower design must not be on the same line or at the same height as the element

I'm facing an issue with CSS regarding achieving the same height. I have a list of designs, each with a description at the bottom. While I've successfully aligned the designs vertically between portrait and landscape orientations, the problem ari ...

Problem Encountered with Navigation Bar following the Cloning and File Transfer in a React (Next) Project

I cloned the repository and transferred the files using these commands: 1. git clone https://github.com/adrianhajdin/portfolio.git 2. cd portfolio 3. mv * .. Upon executing npm run dev, everything appears fine, but upon clicking on the About button or ...

How can I use CSS to place a div at the bottom of its container?

I am trying to figure out how to use CSS to position a div at the bottom of its container, but the size of the container is not fixed. Can anyone provide some guidance on this issue? Thank you in advance for helping me solve this problem. You can check o ...

What is the best way to inquire (or conduct a Google search) on combining objects from various database models?

I'm faced with the challenge of displaying objects from two distinct mongoDB database models simultaneously on a single index page. Currently, these two sets of data are separated onto different index pages due to my lack of foresight. The issue I&ap ...

Can you explain the TypeScript type for the queryKey in React Query?

Currently utilizing react query in conjunction with typescript. What should be the type of arguments passed to the function? export const useIsTokenValid = () => { const { data: token } = useQuery<string | null>(['token'], getToken, { r ...

Start Vue.js development server with SSL enabled (for secure HTTPS serving)

Issue with Development Environment: Recently, I encountered an obstacle related to enforcing HTTPS on external hosts as explained in "Deprecating Powerful Features on Insecure Origins". This problem arose because I have my development setup on my laptop an ...

How to perfectly align an element within a div using Bootstrap

Utilizing bootstrap here. Currently trying to center the h1 element within the div, but so far I have been unsuccessful. It consistently remains aligned to the left. Attempts have included using bootstrap's center-block helper class, as well as the fl ...

Utilizing Moment.js: Transforming 12-hour format to a Date object

Is there a way to convert a 12-hour string into a 24-hour Date object? day.from = day.from || moment("6:00", ["h:mm"]).format("HH:mm"); Unfortunately, I am encountering the following error: angular.js:11706 Error: [ngModel:datefmt] Expected `6:00` to be ...

The for loop unexpectedly interrupts a different array

Hey there, I've been working with puppeteer and came across an issue with the following code snippet: console.log(dealsId[i]); for (var i = 0; i < sizes.length; i++) { var refIdClasses = await sizes[i].$eval('input', a => a.getAtt ...

Combining two divs to share the same linear gradient and shadow effect

Greetings to all our valued partners! I am seeking guidance on how to achieve the following task for a web application I am developing: Within my webapp, I have designed a stylish NavBar similar to the examples depicted in the images (in AdobeXD it is di ...

Styling Collapse Text in Bootstrap Framework

I have a question about the "Accordion example" in the Bootstrap Collapse Component. My query is regarding removing the underline from the text "Collapsible Group Item" 1-3 when they are activated. Normally, this text is not underlined, but upon hovering, ...

Is it necessary to have NodeJs in order to host a React app on a server?

I've been working on a .NET Core 2.2 project with React integration, As I'm nearing completion of the project, I have a query that has been on my mind. Do I need Node.js installed on the server for React to function properly? Thank you. ...

The animation for the accordion feature in the iOS Framework7-vue app seems to be moving at

I am encountering issues with the iOS app while developing both android and iOS apps with Framework7-vue. The Android app functions smoothly, but the iOS app is causing trouble. One of the features include a popup functionality with an accordion inside fo ...

Countdown alert using JavaScript

Currently in my frontend code, I am utilizing angularjs as the javascript framework. In a specific section of my code, I need to display an error message followed by a warning message in this format: If a user inputs an incorrect month, then the following ...

The static sidebar on glass-themed website built with Bootstrap 5 is malfunctioning

Greetings Esteemed Developers I am a newcomer to web development and I have been practicing. However, I encounter difficulties with my CSS at times. Today, I have a query for you all; I am trying to create a fixed sidebar but I am facing challenges. Despit ...

SSR not working properly in Nuxt 3

Currently facing an issue where I am unable to access my private environment variables. I understand that I can only retrieve them when my page is server-side rendered (SSR). Strangely, even though I have never disabled SSR, when I log console.log(process. ...

There seems to be an issue with a potentially null object in an Angular project while trying to view a PDF file

IDENTIFY THE ERROR: printContents = document.getElementById('print').innerHTML.toString(); ON LINE 4: print(): void { let printContents!: string; let popupWin!: any; printContents = document.getElementById('print').innerHTM ...

Each slider only displays a single database entry

I have an array that retrieves testimonials from a database table and displays them using a foreach loop. I am looking to implement a slider that can fade in and fade out the results. Here is my database query: $showTestimonials = array(); $getTestimoni ...

Looking for Efficiency in Basic JavaScript Arithmetic Operations

I'm having trouble figuring out how to display a total price after a selection is made. My goal is to take the selected value, multiply it by 100, and then use the updateTotal function to show the total. // Gather Data & Prices for Updating Dynamic P ...