Alteration of div background hue triggered by drop-down menu selection

Although I am more focused on creating UI designs, I decided to take up some short courses to brush up on my JavaScript skills. However, I encountered a problem where I needed to create a dropdown menu with four color options: red, blue, green, and yellow. When a user selects a color, the div box below should change to that color. I implemented this using Bootstrap.

Here is a snippet of my code: ` Dropdown 1 

<ul class="dropdown-menu">
    <li id="red"><a href="#">Red</a>
    </li>
    <li><a href="#">Blue</a>
    </li>
    <li><a href="#">Green</a>
    </li>
    <li><a href="#">Yellow</a>
    </li>
</ul>

` You can find the full code here http://jsfiddle.net/0c4dbr9t/7/

javascripthtmlcsstwitter-bootstrap

Answer №1

Check out this straightforward code example

Live Demo

Here is the code snippet:

<div class="btn-group"> <a class="btn " href="#">Dropdown 1</a>
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>

    <ul class="dropdown-menu">
        <li data-color="red"><a href="#">Red</a>
        </li>
        <li data-color="blue"><a href="#">Blue</a>
        </li>
        <li data-color="green"><a href="#">Green</a>
        </li>
        <li data-color="yellow"><a href="#">Yellow</a>
        </li>
    </ul>
</div>

<div id ="box"><div>

$( document ).ready(function() {
 $('.dropdown-menu li').click(function(){
        var color = $(this).data("color");

        $("#box").css('background-color',color);
        });
});

Answer №2

Kindly inform me if this meets your requirements.

html

<div class="btn-group"> <a class="btn " href="#">Dropdown 1</a>
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>

    <ul id="dd" class="dropdown-menu">
       <li><a href="#">Red</a>
        </li>
        <li><a href="#">Blue</a>
        </li>
        <li><a href="#">Green</a>
        </li>
        <li><a href="#">Yellow</a>
        </li>
    </ul>
</div>

<div id ="box"><div>

css

#box {
margin-top: 20px;
background-color: #000;
padding: 50px;
}

js

var ul = document.getElementById('dd');
ul.addEventListener("click", changeColor, false);

function changeColor (e) {
  if(e.target.nodeName == "A") {
       document.getElementById("box").style.background = e.target.innerHTML;
    }

}

Answer №3

Implementing basic javascript:

<div class="btn-group"> <a class="btn " href="#">Dropdown 1</a>
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>

    <ul class="dropdown-menu">
        <li id="red"><a href="#">Red</a>
        </li>
        <li><a href="#">Blue</a>
        </li>
        <li><a href="#">Green</a>
        </li>
        <li><a href="#">Yellow</a>
        </li>
    </ul>
</div>

<div id ="container"> Some Text <div>
<script>
var menu = document.querySelector("ul.dropdown-menu");
menu.onclick = function(evt) {
  console.log(evt.target.innerText)
document.getElementById("container").style.backgroundColor = evt.target.innerText;
}
</script>

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

How to prevent links from being affected by the Gooey effect in D3

Issue: When applying the Gooey effect, the links are also affected, resulting in a teardrop shape instead of a circle. The code snippet includes a dragged() function that allows users to detach node 1 from node 0 and reconnect them by dragging. The code s ...

javascriptd3.js

Tips for transferring input field values through the href attribute in HTML?

How can I pass an integer value from a link to an input field's value? Imagine example.com is a webpage with one input field. I would like to achieve something like this: Click here 1 Click here 2 If the user clicks on click here 1, then ...

javascripthtml

What is the best way to retrieve the unique identifier of dynamically created divs and showcase a message based on that identifier?

Is it possible to retrieve the id of a dynamically generated div and show a unique message when each div is clicked in the code snippet found at this link? function get_random_color() { var letters = '0123456789ABCDEF'.split(''); ...

jqueryhtmlcss

Incorporate a fresh key-value pair into the Redux Toolkit's state

I am currently working on an application that enables users to create and modify recipes. To manage the state, I have chosen to utilize React Toolkit and Redux. Here is an example of the state structure: const ingredients = [ { ingredientName: &apos ...

javascriptreactjsobjectreact-reduxredux-toolkit

The responsiveness of my flexbox containers is compromised when using flex-direction:column

I recently started learning flexbox and I'm having trouble understanding it. My header is somewhat responsive, and when I resize my browser window, it adjusts very well. However, the container below with flex-direction: column behaves strangely (try ...

htmlcssflexbox

Is it possible for .getElementByClassName to identify Ajax.GET elements?

I've run into a problem that I need help with: The issue arises when I have an API that makes an Ajax GET request. In the success function, it creates a button, a div, and several span elements with information inside, each with its own class. The GE ...

javascripthtmlajax

Switching from Vue's Options API to Composition API is like transforming your code from

My goal is to transition the code below from using the options API to the composition API in Vue while utilizing Typescript. data() { return { items: [ 'Car', 'Truck', 'Bike', 'Ca ...

javascriptvue.jsvue-componentvuejs3vue-composition-api

Using auto margins does not properly align the image in the center of the page

I noticed that in this specific example, the image is not centered properly. Can someone explain why this might be happening? For context, I am using Google Chrome v10 on a Windows 7 machine, not Internet Explorer. <img src="/img/logo.png" style="mar ...

cssgoogle-chromemargincentering

What is the best way to incorporate a background image in a Bootstrap tooltip?

I'm having trouble displaying an element with a background-image property within a Bootstrap tooltip. The image is not showing up as expected. <div class="big-panel"> <a href="#" data-bs-toggle="tooltip" data ...

javascripthtmlcsstooltipbackground-image

It is not possible to highlight the text that appears in the title of the tooltip in React MUI

Within my react application, there is a component that utilizes the code snippet below: <FormControlLabel labelPlacement="top" control={ comp?.manualInput ? ( <TextField name="price" type= ...

cssreactjsmaterial-ui

Activate the checkbox if the value matches the data retrieved from the database using JavaScript

Hello everyone, I could really use some assistance. I am new to JavaScript and currently have a checkbox with a random value. My goal is to automatically check the checkbox when the data from the database matches the value in the checkbox. This is how my ...

javascriptajaxlaravel

Adjust the iframe height when using slidetoggle

I currently have a menu positioned in the center of the screen, set to "show" by default. Beneath this menu, there is an iframe filling up the remaining space: <script type="text/javascript> $(document).ready(function() { var main_height = ($(d ...

javascriptjquery

CSS background image that will not be affected by padding-top

Is there a way to make a background image override the top padding on the first section of a website? I have set padding-top to separate the first title from the navbar, but now I want the background image to take precedence. Thank you! Using HTML: < ...

cssimagebackgroundpadding

Issues with Vuex store causing incorrect value retrieval

In troubleshooting this issue, I am encountering a problem. My request to the back end is to retrieve data for display on the front end. The data fetched from the backend consists of recipes stored in an array. Utilizing v-for, I iterate through the array ...

javascriptvue.jsaxiosvuex

Modify the text when clicked on, but do not change the span

I'm currently attempting to change the text within an anchor (<a href=>) element when another element is clicked. The structure of the HTML is as follows: <h1> <a href=""> replace this text <span class="breadcrumb" ...

jqueryhtml

Tracking the progress bar as files are being uploaded via AJAX using HTML5

Currently, I have a progress bar that increments based on the number of files and their sizes. I am looking to implement an overall progress bar to display while uploading files to the server using AJAX and HTML5. Each file is uploaded individually to th ...

javascriptjqueryajaxhtml

Removing custom scrollbars using jQuery from an element

Utilizing mCustomScrollbar with jQuery UI dialog boxes. When attempting to initialize mCsutomScrollbar on $(window).load as instructed, it fails because the dialogs are not yet visible. As a workaround, I've had to initiate mCsutomScrollbar on the op ...

javascriptjqueryjquery-uijquery-ui-dialog

Leverage the power of Bootstrap 4 without incorporating its pre-built components

Is it possible to utilize Bootstrap 4 without its components? The diagram below seems to suggest otherwise, correct? My Scenarios: I need to implement Angular Material components instead of Bootstrap components. It's acceptable to use Bootstrap 4 ...

htmlcssangularbootstrap-4angular-material

Using React's Context API to access context within a function and addressing the issue of undefined errors

I'm currently working on a project where I need to create a global variable that toggles between false and true as the user navigates between different views. My approach involves utilizing the Context API to establish this global variable. I have cre ...

javascriptreactjs

Output PHP variable in JavaScript (and show the value within an iframe)

I'm trying to retrieve a value from a MySQL database using PHP, store it in a variable, output the PHP variable in JavaScript, and then display the value in an iframe. However, I'm having some trouble getting it to work... Here is my PHP code: ...

phpjavascriptiframe