JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<form action="" method="post" id="product-type"> <label>Type-Switcher</label>
  <select id="slt">
    <option value="" selected="selected" id="none">please select</option>
    <option value="aform" id="opvalue1">option value 1</option>
    <option value="bform" id="opvalue2">option value 2</option>
  </select>
</form>
<div id="box">
  <!--A FORM--> 
  <form id="aform">
    <div class="form-group row">
      <label for="tone" class="col-sm-1 col-form-label">Tone</label>
      <div class="col-sm-2">
        <input type="tone" class="form-control" id="tone" placeholder="tone">
      </div>
    </div>
  </form>
  <!--B FORM--> 
  <form id="bform">
    <div class="form-group row">
      <label for="bform" class="col-sm-1 col-form-label">Speed</label>
      <div class="col-sm-2">
        <input type="speed" class="form-control" id="speed" placeholder="speed">
      </div>
    </div>
    <div class="form-group row">
      <label for="bform" class="col-sm-1 col-form-label">Shape</label>
      <div class="col-sm-2">
        <input type="shape" class="form-control" id="shape" placeholder="shape">
      </div>
    </div>
  </form>
</div>


<!--rabochij JSCRIPT
var box = document.getElementById('box');
var slt = document.getElementById('slt');



slt.onchange = change_form;

function change_form() {

if (slt.value <= 1){
document.getElementById("box").innerHTML = "Hello World!";
}

if (slt.value >= 2){
document.getElementById("box").innerHTML = "MAZA FAKAAAA";
}



}
-->

CSS

#box {
    width: 500px;
    height:300px;
    border: 2px solid;
    margin: 40px auto;
  }

JavaScript

let opSelect = {
	
}