如何結合輸入欄位的數字和下拉選擇中的選項來求解方程？-有解無憂

我正在構建一個如何結合輸入欄位的數字和下拉選擇中的選項來求解方程？ .

如何結合輸入欄位的數字和下拉選擇中的選項來求解方程？

uj5u.com熱心網友回復：

您需要更改string為intergeror float，我已經為此添加了解決方案parseFloat。parseInt以下

* {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}


/*Fieldset and legend */

fieldset {
  margin: 2em 0;
  padding: 1em 2em;
  border: solid 1px #ccc;
  border-radius: 6px;
  min-width: P 200px;
}

legend {
  font-size: 1.25em;
  padding: 0 .25em;
  color: #999;
}


/* Labels */

label {
  display: block;
  margin-top: 1em;
}

.checks label {
  margin-top: 0;
}

label:first-of-type {
  margin-top: 0;
}

/* Select */

select {
  padding: .5em;
  border: solid 1px #999;
  background-color: #D3D3D3;
  font-family: 'Lato', sans-serif;
  font-size: .8em;
}

#wff, #hff, #wpf, #hpf {
  margin-left: 1em;
  margin-top: auto;
  margin-bottom: auto;

  }
  
  body {
    background-color: white;
    padding: 2em;
  }


/* Inputs and textarea */

input {
  padding: .5em;
  border: solid 1px #999;
  background-color: #D3D3D3
}

input[type="number"],
input[type="text"] {
  width: 10em;
  background-color: #D3D3D3
}

textarea {
  min-height: 8em;
  min-width: 100%;
  padding: .5em;
  border: solid 1px #999;
  background-color: #D3D3D3
}


/* radio buttons and checkboxes */

.checks {
  margin-bottom: 1em;
}

.checks p {
  margin-bottom: 0;
}

input[type="checkbox"] label,
input[type="radio"] label {
  display: inline-block;
  padding-top: 0;
  margin-top: 0;
}

input[type="radio"] {
  margin-left: 1.5em;
  margin-right: 0;
}

input[type="radio"]:first-of-type {
  margin-left: 0;
}

#height {
  text-align: left;
  margin-top: 250px;
  margin-left: 4px;
}


/* Submit Button */

input[type="button"] {
  padding: .5em 1em;
  border-radius: 6px;
  background-color: #333;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: .8em;
}


/* Large screen rules */

@media screen and (min-width: 430px) {
  legend {
    font-size: 1.75em;
  }
  fieldset {
    width: 40%;
    min-width: 320px;
    margin: auto;
  }
  .checks label {
    display: inline-block;
    padding-top: .5em;
    margin-top: 0;
    margin-right: .5em;
  }
}

<!DOCTYPE html>

<html lang="en">

    <head>
    
        <meta charset="UTF-8">

        <meta name "viewport" content="width=device-width,

        initial-scale=1.0">

        <title>I Was Framed - Calculator</title>



        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&display=swap" rel="stylesheet">

        <link rel="stylesheet" href="style.css">

    </head>

<body>

<section>

<form id="frm1" action="form_action.asp">

<fieldset>

<legend>

I Was Framed Calculator

</legend>



<label for="frameWidth">Frame Width:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="wf" id="wf" required><select name="wff" id="wff" required>
    <option value="none" selected="selected"> -- choose one --</option>
    <option value=".0">0</option>
        <option value=".0625">1/16</option>
            <option value=".0125">1/8</option>
                <option value=".1875">3/16</option>
                <option value=".25">1/4</option>
                <option value=".3125">5/16</option>
                <option value=".375">3/8</option>
                <option value=".4375">7/16</option>
                <option value=".50">1/2</option>
                <option value=".5625">9/16</option>
                <option value=".625">5/8</option>
                <option value=".6875">11/16</option>
                <option value=".75">3/4</option>
                <option value=".8125">3/16</option>
                <option value=".875">7/8</option> 
                <option value=".9375">15/16</option>
</select>

<label for="frameHeight">Frame Height:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="hf" id="hf" required><select name="hff" id="hff" required>
    <option value="none" selected="selected"> -- choose one --</option>
    <option value=".0">0</option>
        <option value=".0625">1/16</option>
            <option value=".0125">1/8</option>
                <option value=".1875">3/16</option>
                <option value=".25">1/4</option>
                <option value=".3125">5/16</option>
                <option value=".375">3/8</option>
                <option value=".4375">7/16</option>
                <option value=".50">1/2</option>
                <option value=".5625">9/16</option>
                <option value=".625">5/8</option>
                <option value=".6875">11/16</option>
                <option value=".75">3/4</option>
                <option value=".8125">3/16</option>
                <option value=".875">7/8</option>
                <option value=".9375">15/16</option>
</select>



<label for="pictureWidth">Picture Width:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="wp" id="wp" required><select name="wpf" id="wpf" required>
    <option value="none" selected="selected"> -- choose one --</option>
    <option value=".0">0</option>
        <option value=".0625">1/16</option>
            <option value=".0125">1/8</option>
                <option value=".1875">3/16</option>
                <option value=".25">1/4</option>
                <option value=".3125">5/16</option>
                <option value=".375">3/8</option>
                <option value=".4375">7/16</option>
                <option value=".50">1/2</option>
                <option value=".5625">9/16</option>
                <option value=".625">5/8</option>
                <option value=".6875">11/16</option>
                <option value=".75">3/4</option>
                <option value=".8125">3/16</option>
                <option value=".875">7/8</option>
                <option value=".9375">15/16</option>
</select>

<label for="pictureHeight">Picture Height:</label><input type="number"onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="hp" id="hp" required><select name="hpf" id="hpf" required>
    <option value="none" selected="selected"> -- choose one --</option>
    <option value=".0">0</option>
        <option value=".0625">1/16</option>
            <option value=".0125">1/8</option>
                <option value=".1875">3/16</option>
                <option value=".25">1/4</option>
                <option value=".3125">5/16</option>
                <option value=".375">3/8</option>
                <option value=".4375">7/16</option>
                <option value=".50">1/2</option>
                <option value=".5625">9/16</option>
                <option value=".625">5/8</option>
                <option value=".6875">11/16</option>
                <option value=".75">3/4</option>
                <option value=".8125">3/16</option>
                <option value=".875">7/8</option>
                <option value=".9375">15/16</option>
</select><br>

<label for="matOverlap">Mat Overlap:</label><select name="o" id="o" required>
    <option value="none" selected="selected"> -- choose one --</option>
    <option value=".0">0</option>
        <option value=".0625">1/16</option>
            <option value=".0125">1/8</option>
                <option value=".1875">3/16</option>
                <option value=".25">1/4</option>
                <option value=".3125">5/16</option>
                <option value=".375">3/8</option>
                <option value=".4375">7/16</option>
                <option value=".50">1/2</option>
                <option value=".5625">9/16</option>
                <option value=".625">5/8</option>
                <option value=".6875">11/16</option>
                <option value=".75">3/4</option>
                <option value=".8125">3/16</option>
                <option value=".875">7/8</option>
                <option value=".9375">15/16</option>
</select>

    <br>


<br>
<input type="button" onclick="calc()" value="Calculate" name="cmdCalc"/>

</fieldset>

</form>

</section>

<script src="https://unpkg.com/[email protected]/index.js"></script>

<script>

function calc()

{

    var wf = document.getElementById('wf').value
    wf = parseInt(wf)

    var wff = document.getElementById('wff').value
    wff = parseInt(wff)
    
    var hf = document.getElementById('hf').value
    hf = parseInt(hf)

    var hff = document.getElementById('hff').value
    hff = parseInt(hff)
    
    var wp = document.getElementById('wp').value
    wp = parseInt(wp)

    var wpf = document.getElementById('wpf').value
    wpf = parseInt(wpf)
    
    var hp = document.getElementById('hp').value
    hp = parseInt(hp)

    var hpf = document.getElementById('hpf').value
    hpf = parseInt(hpf)
    
    var o = document.getElementById('o').value
    o = parseFloat(o)
   var width = (1/2)*(hf-hp o);
   var height = (1/2)*(wf-wp o);

   document.getElementById('width').innerHTML = new Fraction(width).toString();
   document.getElementById('height').innerHTML = new Fraction(height).toString();

   document.getElementById('rectangle').scrollIntoView({ behavior: 'smooth'})

}

</script>


<center>
    <div style="width:75%;height:0;border:5px solid #000; margin-top: 30px; margin-bottom: 30px;padding-bottom:75%;background-color:gray" id="rectangle">
        <center>
            <div id="width"></div>
        </center>
   
        <div id="height"></div>
    </div>
</center>


</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/418585.html

標籤：

上一篇：如何根據另一個陣列排列帶有物件的陣列？

下一篇：為什么這個功能還在桌面上運行？