CODEWITHSUNDEEP
javascriptjqueryhtmlcss
WaffleBoy
WaffleBoy

Reputation: 15

Change color and text value of a sibling div element when radio selected

I have a group of divs turned into radio button using JavaScript. I need to have it when the button is selected, for another div, within the same form, but a sibling, to reflect the radio-value of the button, as well as have the text color of that same div to reflect the radio-value, which will be a "color". 

<form method='post' action='send.php'>
<div class='colorsGrid' id='colors' >

     <div style='background-color:red;' class='radio' data-value='Red'>1</div>
      <div style='background-color:green;' class='radio' data-value='Green'>2</div>
      <div style='background-color:black;' class='radio' data-value='Black'>3</div>
      <input type='text' id='radio-value' name='radio-value' />

    </div>

<div  class='' id='color radio-value' name='radio-value' />Color Here</div>

</form>

This is the html. I will have the rest of the code in a JSfiddle. The idea is when I click one of the radio divs, for the "color here" div to say the radio-value and for it to become that color, since the radio-value is a color... This is the min.js: https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

Basically, the div with the id of "color", and labeled as "Color Here", I want to become the color of the selected button as well as have its text changed to the radio-value. Heres the JsFiddle: https://jsfiddle.net/Lrp16v2x/31/

Thank you all

Upvotes: 1

Views: 1211

Answers (3)

SOUPaLOOP
SOUPaLOOP

Reputation: 121

I believe that you want the text of the "Color Here" div to display the value of the .radio div that is clicked. Also, take the clicked .radio buttons background color and set that color to for text color of the "Color Here" div. I was able to do this by:

  1. adding a class to the "Color Here" as .CHNAGE
  2. grabbing the css background color of the clicked element - i have notated this inside code snippet. Use .css() to grab the background color. then store that in a variable named color.
  3. find the sibling of the parent that we named .CHANGE and set he text within using .text() and add the css, again using .css()- notated in the code snippet again.

there are better solutions to this i am sure, but i had 5mins left on my break to help you out with this. let me know if you need any more help. 

$(' .radio').click(function(){
    $(this).parent().find('.radio').removeClass('selected');
    $(this).addClass('selected');
    var val = $(this).attr('data-value');
    var color = $(this).css("background-color");//Get the color of the clicked element
    //alert(val);
    $(this).parent().find('input').val(val);
    
    $(this).parent().siblings('.CHANGE').text(val).css("color", color);//find the parent sibling .CHANGE and set the text and CSS property of the element within the same onclick function
}); 
		.colorsGrid {
	display: grid;
	grid-template-columns: 300px;
	grid-template-rows: auto;
	 }

.radio {
   
    border: 2px solid orange;
    cursor:pointer;	
	
	}

.radio.selected{
    border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form method='post' action='send.php'>
    <div class="colorsGrid" id='colors' >
      <div style='background-color:red;' class='radio' data-value="Red">1</div>
      <div style='background-color:green;' class='radio' data-value="Green">2</div>
      <div style='background-color:black;' class='radio' data-value="Black">3</div>
    	<input type='text' id='radio-value' name='radio-value' />
    </div>
    <div  class='CHANGE' id='color radio-value' name='radio-value'></div>
</form>

Upvotes: 0

Adam
Adam

Reputation: 3965

This will do it. I also cleaned up some of the logic you already had.

$('.radio').click(function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');

    var val = $(this).attr('data-value');
    $('input').val(val);

    $('#color').text(val);
    $('#color').css({ backgroundColor: val });
});

With jQuery, there's no point in going to the element's parent and searching it for a sibling element. Just reference that sibling directly.

Upvotes: 1

remi leclercq
remi leclercq

Reputation: 44

If I understood well you want to replace "Color here" by the color, if so just have to add one line at the end of the function click :

$(' .radio').click(function(){
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
var val = $(this).attr('data-value');
//alert(val);
$(this).parent().find('input').val(val);
$('#radio-value').html(val);

});

Upvotes: 0

Related Questions