select 標簽中的每個選項禁用頁面中的特定元素

Question

我正在嘗試實現一種表單，您可以在其中從select標簽中選擇一個形狀，並計算面積和周長。 我只想要當我 select 來自select的 Square 選項時，像圖像一樣禁用半徑輸入。

請不要使用 JQuery

請不要使用 JQuery

請不要使用 JQuery

這是我的表格，請幫我處理.js文件

<div class="container">
    <hr class="lighter">
    <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>

Answer 1

她是香草 JS 版本

我修正了一些拼寫並添加了“請選擇”

 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 class="container"> <hr class="lighter"> <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>

Answer 2

 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 class="container"> <hr class="lighter" /> <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>

Answer 3

label元素不應像大多數其他 HTML 元素一樣對待，因為它不應在未引用某種類型的input元素的情況下使用。 所以你不應該像你那樣用它們來呈現計算結果等內容！

如果圍繞這些不同的輸入控件使用form ，則可以使用經常被忽視的dotted notation來訪問這些不同的表單元素（盡管自 HTML5 以來，許多瀏覽器允許直接通過 ID 訪問元素，甚至不需要document.getElementById ），這在任何情況下都很有用執行計算的例程，因為它減少了所需的代碼。

 // 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>