JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<div id="finish" class="spalte3">
  <p >Ausfuehrungen Rahmen:</p>
  <form>
  <div>
    <input type="radio" name="finishes" value="cs" class="image_selection">
    <label for="cs">Chrome glanz</label>
  </div>
  <div>
    <input type="radio" name="finishes" value="cbr" class="image_selection">
    <label for="cbr">Chrome gebuerstet</label>
  </div>
  <div>
    <input type="radio" name="finishes" value="cbl" class="image_selection">
    <label for="cbl">Schwarz verchromt</label>
  </div>
  </div>
</form>
<div id="color" class="spalte3">
  <p>Ausfuehrungen Tablare:</p>
  <form>
    <div>
    <input type="radio" name="colours" value="schwarz" class="image_selection">
    <label for="schwarz">Schwarz</label>
  </div>
  <div>
    <input type="radio" name="colours" value="weiss-s" class="image_selection">
    <label for="weiss-s">Weiss</label>
  </div>
  <div>
    <input type="radio" name="colours" value="dunkelrot" class="image_selection">
    <label for="dunkelrot">Dunkelrot</label>
  </div>
   <div>
    <input type="radio" name="colours" value="fango" class="image_selection">
    <label for="fango">Fango</label>
  </div>
</form>
</div>
<div id="log" class="spalte3">
  <img class="skizze-res" src="images/poolfinish/cs-schwarz.jpg" alt="Chrom glanz mit Schwarz">
</div>

JavaScript

$(document).ready(function(){
	
	
	var $htmlImagePath = "<img src='images/";
	var $selection1 = ($("input[type=radio][name='finishes'][value='cs']").prop ("checked", true));
	var $selection2 = ($("input[type=radio][name='colours'][value='schwarz']").prop ("checked", true));
	


		$("#finish input:radio").on ("click", function(){
			 $selection1 = $("#finish input:checked").val(); 
            $htmlImagePath = $htmlImagePath + $selection1 + '-';
            newPath();
		});
		
		
	
		
	
		$("#color input:radio").on ("click", function() {
			$selection2 = $("#color input:checked").val();
            $htmlImagePath = $htmlImagePath + $selection2 + ".jpg'";
            newPath();
		});
		
		function newPath(){
           console.log($htmlImagePath);
        }
	
		

	
			
	
});