jquery - Change Border Color of Div Based on Selection With CSS and JavaScript

I'm trying to create a JavaScript function that allows us to change the border color of a div based on our selection. If the user selects Div 1 and Gray 1, the border-color of Div 1 will change to color:#333333; after hitting Make Change.

HTML:

<div id="div_6">
Div Selector:
<!-- Place Div Select Here -->
<select>
<option>Div 1</option>
<option>Div 2</option>
<option>Div 3</option>
</select>
<br /><br />
Color Selector:
<!-- Place Color Select Here -->
<select>
<option>Gray 1</option>
<option>Gray 2</option>
<option>Gray 3</option>
</select>
<!-- Place "Change Color" Button Here -->
<button>Change Color</button>
</div>

CSS:

    /*color selectors*/
    #Gray1 {
    color:#333333;
    }
    #Gray2 {
    color:#777777;
    }
    #Gray3 {
    color:#CCCCCC;
    }

So the function will need to access these ID's. Please see the entire code / website here:

I'm lost as to where to even start when creating this function. Do I need to assign to options various classes in the HTML? Thank you!

EDIT Of course the script will go in the <script> section of the <head>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="This is a simple CSS, HTML, and JS Test"/>
<title>WebToMed Website Developer Test</title>
<style>
/* Add all CSS enteries here */
    #div_1 {
    background: red;
    display: table-cell;
    text-align: left;
    width: 300px;
    height: 50px;
    }
    #div_2 {
    background: green;
    display: table-cell;
    text-align: center;
    height: 50px;
    }
    #div_3 {
    background: blue;
    display: table-cell;
    text-align: right;
    width: 350px;
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;
    height: 50px;
    }
    #div_4 {
    background: yellow;
    display: flex;
    text-align: center;

    height: 300px;
    }
    #div_5 {
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
    }
    #div_6 {
    border: 3px solid black;
    margin-top: 10px; 
    padding: 20px;         
    }
    .container {
    display: table;
    width: 100%;
    }
    /*color selectors*/
    #Gray1 {
    color:#333333;
    }
    #Gray2 {
    color:#777777;
    }
    #Gray3 {
    color:#CCCCCC;
    }
   </style>
<script>
/* Add any JavaScript here */
</script>
</head>
<body>

HTML:

<div id="div_6">
Div Selector:
<!-- Place Div Select Here -->
<select>
<option>Div 1</option>
<option>Div 2</option>
<option>Div 3</option>
</select>
<br /><br />
Color Selector:
<!-- Place Color Select Here -->
<select>
<option>Gray 1</option>
<option>Gray 2</option>
<option>Gray 3</option>
</select>
<!-- Place "Change Color" Button Here -->
<button>Change Color</button>
</div>

CSS:

    /*color selectors*/
    #Gray1 {
    color:#333333;
    }
    #Gray2 {
    color:#777777;
    }
    #Gray3 {
    color:#CCCCCC;
    }

So the function will need to access these ID's. Please see the entire code / website here:

http://blog.drawyourpets./

I'm lost as to where to even start when creating this function. Do I need to assign to options various classes in the HTML? Thank you!

EDIT Of course the script will go in the <script> section of the <head>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="This is a simple CSS, HTML, and JS Test"/>
<title>WebToMed Website Developer Test</title>
<style>
/* Add all CSS enteries here */
    #div_1 {
    background: red;
    display: table-cell;
    text-align: left;
    width: 300px;
    height: 50px;
    }
    #div_2 {
    background: green;
    display: table-cell;
    text-align: center;
    height: 50px;
    }
    #div_3 {
    background: blue;
    display: table-cell;
    text-align: right;
    width: 350px;
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;
    height: 50px;
    }
    #div_4 {
    background: yellow;
    display: flex;
    text-align: center;

    height: 300px;
    }
    #div_5 {
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
    }
    #div_6 {
    border: 3px solid black;
    margin-top: 10px; 
    padding: 20px;         
    }
    .container {
    display: table;
    width: 100%;
    }
    /*color selectors*/
    #Gray1 {
    color:#333333;
    }
    #Gray2 {
    color:#777777;
    }
    #Gray3 {
    color:#CCCCCC;
    }
   </style>
<script>
/* Add any JavaScript here */
</script>
</head>
<body>

Share Improve this question edited Mar 27, 2019 at 12:57 asked Jun 9, 2017 at 13:52 HappyHands31 4,10119 gold badges65 silver badges117 bronze badges

2 jsfiddle/yt2u8z3w Heres a working fiddle for you ;) – enno.void Commented Jun 9, 2017 at 14:02
@mr.void Why didn't you paste that as an answer? – Joey Ezekiel Commented Jun 9, 2017 at 14:04
My english is to bad to explain the solution :( – enno.void Commented Jun 9, 2017 at 14:05

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

function change() {  
  $('#' + $('#select-div').val()).css('border', '3px solid ' + $('#select-color').val());
}

#div_1 {
  background: red;
  display: table-cell;
  text-align: left;
  width: 300px;
  height: 50px;
}

#div_2 {
  background: green;
  display: table-cell;
  text-align: center;
  height: 50px;
}

#div_3 {
  background: blue;
  display: table-cell;
  text-align: right;
  width: 350px;
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
  height: 50px;
}

#div_4 {
  background: yellow;
  display: flex;
  text-align: center;
  height: 300px;
}

#div_5 {
  margin-top: auto;
  margin-bottom: auto;
  margin-right: auto;
  margin-left: auto;
}

#div_6 {
  border: 3px solid black;
  margin-top: 10px;
  padding: 20px;
}

.container {
  display: table;
  width: 100%;
}


/*color selectors*/

#Gray1 {
  color: #333333;
}

#Gray2 {
  color: #777777;
}

#Gray3 {
  color: #CCCCCC;
}

.output {
  margin-top: 20px;
}
.output > div {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #000;
  padding: 20px;
  text-align: center;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_6">
  Div Selector:
  <select id="select-div">
    <option value="div1">Div 1</option>
    <option value="div2">Div 2</option>
    <option value="div3">Div 3</option>
  </select>
  <br /><br /> Color Selector:
  <select id="select-color">
    <option value="#777">Gray #555</option>
    <option value="#999">Gray #999</option>
    <option value="#AAA">Gray #BBB</option>
  </select>
  <button onClick="change();">Change Color</button>
  
  <div class="output">
    <div id="div1">div 1</div>
    <div id="div2">div 2</div>
    <div id="div3">div 3</div>
  </div>
</div>

Okay i will try to explain.

First you should define a function thats acts as Eventhandler for an event. There are multiple events that are fired by DOM-Elements like button, divs, etc.

For your case we want to listen for the click event of the button. (If a user clicks on the button, a method get executed)

If you work with jQuery this can easly done:

$('.submit').on('click', () => {

})

Notice: ive added a "submit"-Class to your Markup:

<button class="submit">Change Color</button>

On the next step we want the Values that the user selected via the selection. With jQuery this can done like so:

var idOfDiv = $('.divSelect option:selected').val();
var selectedGrayClass = $('.colorSelect option:selected').val();

Notice: ive added a "divSelect" and "colorSelect"-Classes to your Markup:

<select class="divSelect">
<option value="div1">Div 1</option>
<option value="div2">Div 2</option>
<option value="div3">Div 3</option>
</select>
<br /><br />
Color Selector:
<!-- Place Color Select Here -->
<select class="colorSelect">
<option value="gray1">Gray 1</option>
<option value="gray2">Gray 2</option>
<option value="gray3">Gray 3</option>
</select>

Notice: the values defined on the colorSelect selection should reference to some css classes:

.gray1 {border:1px solid gray}
.gray2 {border:1px solid #222}
.gray3 {border:1px solid #ccc}

On the final step we apply the data we've read from our selections:

$('#'+idOfDiv).removeClass().addClass(selectedGrayClass);

Notice: removeClass is there to remove a Class that may added before.

Complete solution: https://jsfiddle/yt2u8z3w/

1.) Assign values to your options, assign IDs to your selects in your HTML:

<div id="div_6">
Div Selector:
<!-- Place Div Select Here -->
<select id="div">
<option value="div1">Div 1</option>
<option value="div2">Div 2</option>
<option value="div3">Div 3</option>
</select>
<br /><br />
Color Selector:
<!-- Place Color Select Here -->
<select id="colors">
<option value="gray1">Gray 1</option>
<option value="gray2">Gray 2</option>
<option value="gray3">Gray 3</option>
</select>

2.) Create your JavaScript function within your <script> </script> tags. Declare your variables:

<script>
/* Add any JavaScript here */

function changecolor(){
/*gets selected value within select with ID "div"*/
var selectedvalue = document.getElementById("div").value;
/*gets selected value within select with ID "colors"*/
var selectedcolor = document.getElementById("colors").value;

3.) Create If, Else If statements to declare border styles based on selection:

if(selectedvalue == "div1" &&  selectedcolor == "gray1"){
      document.getElementById("div_1").style.borderColor="#333333";
      document.getElementById("div_1").style.borderWidth ="3px";
      document.getElementById("div_1").style.borderStyle ="solid";
}
else if(selectedvalue == "div2" &&  selectedcolor == "gray1"){
      document.getElementById("div_2").style.borderColor="#333333";
      document.getElementById("div_2").style.borderWidth ="3px";
      document.getElementById("div_2").style.borderStyle ="solid";
}
else if(selectedvalue == "div3" &&  selectedcolor == "gray1"){
      document.getElementById("div_3").style.borderColor="#333333";
      document.getElementById("div_3").style.borderWidth ="3px";
      document.getElementById("div_3").style.borderStyle ="solid";
}
else if(selectedvalue == "div1" &&  selectedcolor == "gray2"){
      document.getElementById("div_1").style.borderColor="#777777";
      document.getElementById("div_1").style.borderWidth ="3px";
      document.getElementById("div_1").style.borderStyle ="solid";
}
else if(selectedvalue == "div2" &&  selectedcolor == "gray2"){
      document.getElementById("div_2").style.borderColor="#777777";
      document.getElementById("div_2").style.borderWidth ="3px";
      document.getElementById("div_2").style.borderStyle ="solid";
}
else if(selectedvalue == "div3" &&  selectedcolor == "gray2"){
      document.getElementById("div_3").style.borderColor="#777777";
      document.getElementById("div_3").style.borderWidth ="3px";
      document.getElementById("div_3").style.borderStyle ="solid";
}
else if(selectedvalue == "div1" &&  selectedcolor == "gray3"){
      document.getElementById("div_1").style.borderColor="#CCCCCC";
      document.getElementById("div_1").style.borderWidth ="3px";
      document.getElementById("div_1").style.borderStyle ="solid";
}
else if(selectedvalue == "div2" &&  selectedcolor == "gray3"){
      document.getElementById("div_2").style.borderColor="#CCCCCC";
      document.getElementById("div_2").style.borderWidth ="3px";
      document.getElementById("div_2").style.borderStyle ="solid";
}
else if(selectedvalue == "div3" &&  selectedcolor == "gray3"){
      document.getElementById("div_3").style.borderColor="#CCCCCC";
      document.getElementById("div_3").style.borderWidth ="3px";
      document.getElementById("div_3").style.borderStyle ="solid";
}
};

</script>

There's no need to declare the styles for your ID's with CSS. You can remove the lines after /*color selectors*/ within your <style> </style> tags. We are doing "inline styles" with JavaScript when we do this: .style.borderColor="#333333";. JavaScript styles, by the way, are usually similar to CSS styles but appear in camelCase. So font-weight in CSS = fontWeight in JavaScript.

selected element,

document.querySelector('my_element_tag').onclick = function(){
   document.querySelector('my_element_tag_for_change_color').style.border = "1px solid #333";
};

Or if you have many element

 document.querySelectorAll('my_element_tag').forEach(function(element){
       element.onclick = function(){ 
           element.style.border = "1px solid #333";
      };
    });

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744275725a4566320.html

jquery - Change Border Color of Div Based on Selection With CSS and JavaScript - Stack Overflow

4 Answers 4

发表回复

评论列表（0条）

联系我们

400-800-8888

jquery - Change Border Color of Div Based on Selection With CSS and JavaScript - Stack Overflow

4 Answers 4

相关推荐