Tips for adjusting the background color of an HTML section based on array outcomes

I created an array that randomly selects a movie, and below I have movie posters. When I click on a poster, it takes me to the movie on Netflix. It would be really helpful if the background color of the selected movie poster changed to green for easier identification.

javascript

function GetMovie()
{
    var movies = new Array("13 assassins"); // just an example
    var randomMovie = movies[Math.floor(Math.random() * movies.length)];

    document.randform.randomfield.value = randomMovie;
}

        </script>

html

<body>
       <Div id=maincontent>
            <section id="topcontent">
       <form name="randform">
        <input type="button" id="btnSearch" value="Click for a random movie"    onclick="GetMovie();" />
        <input type="text" name="randomfield" value="" size="50">
        </form>

            <section id="movies">

               <!--13 assassins -->
             <div id="movie">


                <a  href="link to film">
                    <img src="images/13.jpg" alt="player" width="225" height="325">
                </a>

            </div>

css

#movie{
   margin-top:5%;
    width:225px;
    height:325px;
    float:left;
    background-color:whitesmoke; //want this to be green when the movie is picked
    border-radius:5px; 
    margin-left:2%;
    padding:2% 3%;
    margin-bottom:2%;
    margin-right:2%; 
}

Answer №1

function GetRandomMovie()
{
    var moviesArray= new Array("13 assassins"); // just an example
    var randomMovie = moviesArray[Math.floor(Math.random() * moviesArray.length)];

    document.randform.randomfield.value = randomMovie;
    document.getElementById(randomMovie).style.border = "2px solid green";// use this if you have multiple images .and to identify each image give the same id as the values in your array
   
   // but if you want to set border to div movie then do this:
 document.getElementById('movie').style.border = "2px solid green";// comment it if not required

}
#movie{
   margin-top:5%;
    width:225px;
    height:325px;
    float:left;
    background-color:whitesmoke; //want this to be green when the movie is picked
    border-radius:5px; 
    margin-left:2%;
    padding:2% 3%;
    margin-bottom:2%;
    margin-right:2%; 
}
<div id=maincontent>
            <section id="topcontent">
       <form name="randform">
        <input type="button" id="btnSearch" value="Click for a random movie"    onclick="GetRandomMovie();" />
        <input type="text" name="randomfield" value="" size="50">
        </form>

            <section id="movies">

               <!--13 assassins -->
             <div id="movie" >


                <a  href="link to film">
                    <img src="images/13.jpg" alt="player" width="225" height="325" id="13 assassins">
                </a>

            </div>
            </section>

Answer №2

Modifying CSS properties using jQuery is possible

$("#album").css("background-color", "blue");

In case you have multiple div elements for movies, assigning unique IDs to each one can be beneficial. Incorporating database IDs could also be a viable option.

$("#movie789").css("background-color", "blue");

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

What is the method to display the bootstrap carousel controls on top of the images rather than beside them?

As a beginner, I'm utilizing the carousel code provided by Bootstrap. While it's functioning, the controls are taking up space to the right and left of the image instead of overlaying them. In an attempt to resolve this issue, I added the follow ...

How to center align an input vertically with Bootstrap 3

I am having trouble vertically aligning an input in my project. Interestingly, my code works for a span but not for the input! I'm puzzled - what could be the reason behind this? JSFiddle Here is the CSS code snippet: .float { display: table-cel ...

What is causing the additional space at the bottom?

Why does my centered black border triangle have an extra bottom margin causing a scroll bar to appear? * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100%; background: blue; } .canvas { border: 10px s ...

Issue with uploading images in Summernote

It seems that my onImageUpload function in the summer note jQuery plugin is not functioning as expected. I am trying to upload an image to a folder location different from the default summernote directory. How can this be handled? index.php <textarea ...

Continuously iterate through a PHP page until the session variable reaches a specific value

I am in the process of creating a web-based exam. All questions and answers are stored in a MySQL database. I began by retrieving and displaying one question along with multiple-choice answers. I used a session variable $_SESSION['questionno'] = ...

How can we control the content being displayed on our tree?

Is there a way to customize the view of our V-treeview by filtering what is displayed? By entering the beginning of an element key in the filter field input, the tree will only show elements whose keys match the input. I am working on Vue.js with the late ...

Is it possible to include multiple data arguments in the useMutation hook in react-query?

The structure of the useMutation Hook argument is defined as follows in the guide: const { data, error, isError, isIdle, isLoading, isPaused, isSuccess, mutate, mutateAsync, reset, status, } = useMutation(mutationFn, { cacheTime, ...

Generate a list of JS and CSS paths for UglifyJS/UglifyCSS by parsing an HTML file

Seeking a tool that can scan an HTML file (specifically a Smarty template file) to extract paths from <script></script> and <link/> tags for use with UglifyJS/UglifyCSS or similar minification tools. Extra credit if it can handle download ...

Run JavaScript function when an ajax request encounters an error

When using the ajax function to call a webservice and encountering an error, my goal is to trigger the userCreate() javascript function. $.ajax({ type:"POST", beforeSend: function (request) { request.setRequestHeader("X-DreamFactory-Applic ...

List Elements Not Displaying Correctly due to CSS Styling Issues

After spending several hours trying to solve this problem, I've hit a roadblock. The challenge lies in dynamically adding items to a list using JavaScript and the Dojo library. I've experimented with both vanilla JS and Dojo code, ruling that pa ...

Is it possible for WebSockets to serve as a substitute for AJAX for handling Database requests?

I have recently made the switch on my website from using the EventSource Polling constructor to the WebSocket standard in Node.js. Originally, all backend work on my site was done with PHP, but I am now trying to transition as much as possible to WebSocket ...

Issues are arising with the for loop in an express node js app using ejs, as it is not displaying the intended data and

I am currently utilizing a for loop in JavaScript to display all the users from the database using ejs. I have included the code snippet below. This is within an express/node js application where SQL is used for data storage. <div class = "Contacts ...

Utilize the information stored in my calculator to input as variables into the chart

I have developed a calculator using JQuery and now I want to pass the calculated results to my Chart JS program so that the chart can dynamically adjust based on new calculations being performed. How do I achieve this with the code below? ** Calculator (J ...

Updating an array of key/value pairs in Mongoose: A step-by-step guide

Context: I am dealing with an array of objects retrieved from Vue Axios. These objects contain key-value pairs and are stored in the req.body. Request Body: keyValue: [{key:"some key", value:"some value"}, {key:"some key2", value:"some value2"}] Import ...

Tips for incorporating the ternary operator in JSX of a React component while utilizing TypeScript?

I am looking to implement a conditional rendering logic in React and TypeScript, where I need to return null if a specific condition is met, otherwise render a component using a ternary operator. Here is the code snippet I currently have: {condition1 && ...

Using JQuery to incorporate carousel elements

I am currently developing an insertion form that adds a product to a [ products draft ]. This involves working with two tables: one named ( Drafts ) and the other named ( items ). Each item in the "items" table has a corresponding draft ID associated with ...

The redirection to the HTML page happens too soon, causing the ASYNC functions to fail in saving the user's image and data to the server

Hey everyone! I'm facing an issue with async/await functions. Here's the code snippet from my backend where I'm trying to save details of a newly registered user. I'm puzzled as to why the Redirect() function is executing before the f ...

Automatic cancellation of AJAX request

Having a strange issue that I need help with. I am using a standard ajax call to upload avatars from the user's PC to the server. However, sometimes I notice in Firebug that the request is being "Aborted" and marked in red after loading for some time ...

A guide on defining global variables in React JS

I've been scouring the internet, including various coding forums, for information on declaring global variables in JS React. One of my variables is called name, and I need to access it in multiple sections of my code. However, I'm encountering i ...

Experience the power of React 16 and Babel 6 directly in your web browser

Looking to utilize React directly in the browser without the need for bundles using browserify/webpack. Experimenting with babel-standalone and react from the browser, encountering a 'ReactDOM is not defined' error along with two other warnings ...