each option in select tag disable a specific element in page-CodePudding

I'm trying to implement a form in which you choose a shape from a select tag and it calculates the area and perimeter. I just want when I select the Square option from the select, radius input disabled like the image.

Please do not use JQuery

here is my form please help me with .js file

<div >
    <hr >
    <label for="shapes">Shapes :</label>
    <select name="shapes" id="shapes">
        <option value="rectangle">Rectangle</option>
        <option value="square">Square</option>
        <option value="circle">Circle</option>
        <option value="cylindrical">Cylindrical</option>
    </select>
    <br><br>
    <lable for="radius">Radius : </lable>
    <input type="number" id="radius" disabled><br>
    <lable for="shapeWidth">Widht : </lable>
    <input type="number" id="shapeWidth"><br>
    <lable for="shapeHeight">Height :</lable>
    <input type="number" id="shapeHeight">
    <hr>
    <label for="area" id="area_result">Area :</label>
    <label for="area_result"></label>
    <br>
    <label for="primiter" id="primiter_result">Primiter :</label>
    <label for="primiter_result"></label>
</div>

CodePudding user response：

const eleId = document.getElementById("shapes");
const radiusId = document.getElementById("radius");
eleId.addEventListener(
  "change",
  function () {
    if (this.value === "square") {
      radiusId.disabled = true;
    } else {
      radiusId.disabled = false;
    }
  },
)

<div >
  <hr  />
  <label for="shapes">Shapes :</label>
  <select name="shapes" id="shapes">
    <option value="rectangle">Rectangle</option>
    <option value="square">Square</option>
    <option value="circle">Circle</option>
    <option value="cylindrical">Cylindrical</option>
  </select>
  <br /><br />
  <lable for="radius">Radius : </lable>
  <input type="number" id="radius" /><br />
  <lable for="shapeWidth">Widht : </lable>
  <input type="number" id="shapeWidth" /><br />
  <lable for="shapeHeight">Height :</lable>
  <input type="number" id="shapeHeight" />
  <hr />
  <label for="area" id="area_result">Area :</label>
  <label for="area_result"></label>
  <br />
  <label for="primiter" id="primiter_result">Primiter :</label>
  <label for="primiter_result"></label>
</div>

CodePudding user response：

Her is a vanilla JS version

I fixed some spelling and added a "please select"

window.addEventListener("DOMContentLoaded", () => { // when the page has loaded
  document.getElementById("shapes").addEventListener("change", function() { // when the select is changed
    document.getElementById("radius").disabled = ["rectangle","square"].includes(this.value); // disable if square or rectangle. 
  })
});

<div >
  <hr >
  <label for="shapes">Shapes :</label>
  <select name="shapes" id="shapes">
    <option value="">Please select</option>
    <option value="rectangle">Rectangle</option>
    <option value="square">Square</option>
    <option value="circle">Circle</option>
    <option value="cylindrical">Cylindrical</option>
  </select>
  <br><br>
  <label for="radius">Radius : </label>
  <input type="number" id="radius" ><br>
  <label for="shapeWidth">Width : </label>
  <input type="number" id="shapeWidth"><br>
  <label for="shapeHeight">Height :</label>
  <input type="number" id="shapeHeight">
  <hr>
  <label for="area" id="area_result">Area :</label>
  <label for="area_result"></label>
  <br>
  <label for="perimeter" id="perimeter_result">Perimeter :</label>
  <label for="perimeter_result"></label>
</div>

CodePudding user response：

A label element should not be treated like the majority of other HTML elements in that it is not supposed to be used without being referenced to an input element of some type. So you should not use them to present content such as the calculation results as you do!

If you use a form around these various input controls you can use the often overlooked dotted notation to access these various form elements ( though many browsers permit accessing elements directly by ID without even requiring document.getElementById these days since HTML5 ) which is useful within any routines to perform the calculations as it reduces the code required.

// precision for floats
const precision=3;

const d=document;

// get reference to the parent form
const f=d.forms.calculator;

// event handler
const evthandler=function(e){
  
  // ensure all disabled elements are re-enabled
  f.querySelectorAll('input:disabled').forEach( input => input.disabled=false );
  
  // named form inputs/outputs etc
  let oSel=f.shapes;
  let oArea=f.area;
  let oPer=f.perimeter;
  let oRad=f.radius;
  let oWidth=f.shapeWidth;
  let oHeight=f.shapeHeight;
  
  // The currently selected `option`
  let option=oSel.options[ oSel.options.selectedIndex ];

  // access a named dataset to identify which elements to disable.
  if( option.dataset.disable!=null ){
     f[ option.dataset.disable ].disabled=true;
  }
  
  // do the calculations and show the results...
  oArea.textContent=area( oSel.value, oWidth.value, oHeight.value, oRad.value );
  oPer.textContent=perimeter( oSel.value, oWidth.value, oHeight.value, oRad.value );
};







const area=(shape,w,h,r)=>{
  switch( shape ){
    case 'square':
    case 'rectangle':return w * h;
    case 'circle':return ( Math.PI * Math.pow( r, 2 ) ).toFixed(precision);
    case 'cylindrical':return ( 2 * Math.PI * Math.pow( r, 2 )   2 * Math.PI * r * h ).toFixed(precision);
  }
};
const perimeter=(shape,w,h,r)=>{
  switch( shape ){
    case 'square':return 4 * Math.min(w,h);
    case 'rectangle':return ( 2 * w )   ( 2 * h );
    case 'circle':return ( Math.PI * r * 2 ).toFixed(precision);
    case 'cylindrical': return ( 2 * ( Math.PI * ( r * 2 ) ) ).toFixed(precision);
  }
};






// assign the delegated event handler to respond to any change events
f.addEventListener('change', evthandler )

label{display:block;width:40%;clear:both;padding:0.5rem;}
label input,label select{float:right;width:60%;padding:0.25rem}
hr{margin:1rem 0}
output{color:green}

<div class='container'>
  <hr class='lighter'>
  <!--
    Form added to group together form elements and allow
    named access using dot notation.
    
    labels correctly spelled and inputs nested within
    so that <br /> tags can be replaced with CSS blocks
    
    Added a dataset ( data-disable )
  -->
  <form name='calculator'>
    <label>Shapes :
      <select name='shapes'>
        <option disabled hidden selected>Please select
        <option data-disable='radius' value='rectangle'>Rectangle</option>
        <option data-disable='radius' value='square'>Square</option>
        <option value='circle'>Circle</option>
        <option value='cylindrical'>Cylindrical</option>
      </select>
    </label>



    <label>Radius: <input type='number' name='radius' min=0 step=1></label>
    <label>Width: <input type='number' name='shapeWidth' min=0 step=1></label>
    <label>Height: <input type='number' name='shapeHeight' min=0 step=1></label>

    <hr />
    
    <!--
      output tags for displaying output rather than labels.
    -->
    <label>Area: <output name='area'></output></label>
    <label>Perimeter: <output name='perimeter'></output></label>
  </form>
</div>