如何获取存储在另一个函数中的值（使用oninput更改效果）

问题描述 投票：0回答：1

我也想在 

total_saving
更改后显示 
oninput
。我应该如何获取 
reflect_elec()
--> 
inputValue_elec
值到 
reflect_cosm()
来更新 
total_saving
变量的计算？

function Calculate() {
  var userInput = document.getElementById("user-input-box").value;

  var cosmetics = (userInput * 5) / 100;
  var electronics = (userInput * 10) / 100;
  var fashion = (userInput * 20) / 100;
  var grocery = (userInput * 0) / 100;
  var home_appliances = (userInput * 0) / 100;
  var hotel_bookings = (userInput * 10) / 100;
  var kitchen = (userInput * 10) / 100;
  var mobiletv = (userInput * 10) / 100;
  var pharmacy = (userInput * 5) / 100;
  var shoes = (userInput * 10) / 100;
  var sports = (userInput * 10) / 100;
  var travel = (userInput * 10) / 100;

  var total_price = cosmetics + electronics + fashion + grocery + home_appliances + hotel_bookings + kitchen + mobiletv + pharmacy + shoes + sports + travel;

  // assign value to input editable field
  document.getElementById("cosm").value = cosmetics;
  document.getElementById("elec").value = electronics;
  document.getElementById("fash").value = fashion;
  document.getElementById("groc").value = grocery;
  document.getElementById("home").value = home_appliances;
  document.getElementById("hote").value = hotel_bookings;
  document.getElementById("kitc").value = kitchen;
  document.getElementById("mobi").value = mobiletv;
  document.getElementById("phar").value = mobiletv;
  document.getElementById("shoe").value = pharmacy;
  document.getElementById("spor").value = sports;
  document.getElementById("trav").value = travel;

  //without comission display
  document.getElementById('cosmetics_m').innerHTML = `<p><strong>Cosmetics: </strong> ${cosmetics} </p>`;
  document.getElementById('electronics_m').innerHTML = `<p><strong>Electronics: </strong> ${electronics} </p>`;
  document.getElementById('fashion_m').innerHTML = `<p><strong>Fashion: </strong> ${fashion} </p>`;
  document.getElementById('grocery_m').innerHTML = `<p><strong>Grocery: </strong> ${grocery} </p>`;
  document.getElementById('home_m').innerHTML = `<p><strong>Home Appliances: </strong> ${home_appliances} </p>`;
  document.getElementById('hotel_m').innerHTML = `<p><strong>Hotel Bookings: </strong> ${hotel_bookings} </p>`;
  document.getElementById('kitchen_m').innerHTML = `<p><strong>Kitchen Appliances: </strong> ${kitchen} </p>`;
  document.getElementById('mobile_m').innerHTML = `<p><strong>Mobile & TV: </strong> ${mobiletv} </p>`;
  document.getElementById('pharmacy_m').innerHTML = `<p><strong>Pharmacy: </strong> ${pharmacy} </p>`;
  document.getElementById('shoes_m').innerHTML = `<p><strong>Shoes: </strong> ${shoes} </p>`;
  document.getElementById('sports_m').innerHTML = `<p><strong>Sports & Fitness: </strong> ${sports} </p>`;
  document.getElementById('travel_m').innerHTML = `<p><strong>Travel & Flights: </strong> ${travel} </p>`;

  var cosm_saving = (cosmetics * 5) / 100;
  var elec_saving = (cosmetics * 3) / 100;
  var fash_saving = (cosmetics * 15) / 100;
  var groc_saving = (cosmetics * 5) / 100;
  var home_saving = (cosmetics * 10) / 100;
  var hote_saving = (cosmetics * 5) / 100;
  var kitc_saving = (cosmetics * 1) / 100;
  var mobi_saving = (cosmetics * 3) / 100;
  var phar_saving = (cosmetics * 10) / 100;
  var shoe_saving = (cosmetics * 5) / 100;
  var spor_saving = (cosmetics * 2) / 100;
  var trav_saving = (cosmetics * 15) / 100;

  var total_saving = (cosm_saving + elec_saving + fash_saving + groc_saving + home_saving + hote_saving + kitc_saving + mobi_saving + phar_saving + shoe_saving + spor_saving + trav_saving);

  //with comission
  document.getElementById('cosmetics_c').innerHTML = `<p><strong>Cosmetics: </strong> ${cosm_saving} (5% savings)</p>`;
  document.getElementById('electronics_c').innerHTML = `<p><strong>Electronics: </strong> ${elec_saving} (3% savings) </p>`;
  document.getElementById('fashion_c').innerHTML = `<p><strong>Fashion: </strong> ${fash_saving} (15% savings)</p>`;
  document.getElementById('grocery_c').innerHTML = `<p><strong>Grocery: </strong> ${groc_saving} (5% savings)</p>`;
  document.getElementById('home_c').innerHTML = `<p><strong>Home Appliances: </strong> ${home_saving} (10% savings) </p>`;
  document.getElementById('hotel_c').innerHTML = `<p><strong>Hotel Bookings: </strong> ${hote_saving} (5% savings) </p>`;
  document.getElementById('kitchen_c').innerHTML = `<p><strong>Kitchen Appliances: </strong> ${kitc_saving} (1% savings) </p>`;
  document.getElementById('mobile_c').innerHTML = `<p><strong>Mobile & TV: </strong> ${mobi_saving} (3% savings) </p>`;
  document.getElementById('pharmacy_c').innerHTML = `<p><strong>Pharmacy: </strong> ${phar_saving} (10% savings) </p>`;
  document.getElementById('shoes_c').innerHTML = `<p><strong>Shoes: </strong> ${shoe_saving} (5% savings) </p>`;
  document.getElementById('sports_c').innerHTML = `<p><strong>Sports & Fitness: </strong> ${spor_saving} (2% savings)</p>`;
  document.getElementById('travel_c').innerHTML = `<p><strong>Travel & Flights: </strong> ${trav_saving} (15% savings) </p>`;
  document.getElementById('total_saving').innerHTML = `<hr><p><span style="font-size:20px; font-weight:600;">Total Savings: </span> ${total_saving} </p>`;
  // document.getElementById('cosmetics').innerHTML = `<label for="i1">Cosmetics</label>     <input id="i1" name="input1" > ${cosmetics} `;
  // document.getElementById('electronics').innerHTML = `<p><strong>Cosmetics: </strong> ${cosmetics} </p>`;

}
var inputValue_cosm, inputValue_elec, inputValue_fash, inputValue_groc, inputValue_home, inputValue_hote, inputValue_hote, inputValue_kitc, inputValue_mobi, inputValue_phar, inputValue_shoe, inputValue_spor, inputValue_trav;

function reflect_cosm() {
  // Get the input element
  const inputElement = document.getElementById("cosm");
  // Get the output element
  const outputElement = document.getElementById("cosmetics_m");
  const outputElement_c = document.getElementById("cosmetics_c");

  // Get and display the value in the output
  const inputValue = inputElement.value;
  outputElement.innerHTML = `<p><strong>Cosmetics: </strong> ${inputValue} </p>`;

  inputValue_cosm = ((inputElement.value * 5) / 100);
  outputElement_c.innerHTML = `<p><strong>Cosmetics: </strong> ${inputValue_cosm} (5% savings) </p>`;

  // total_saving = inputValue_cosm + inputValue_elec + inputValue_fash + inputValue_groc + inputValue_home + inputValue_home + inputValue_hote + inputValue_kitc + inputValue_mobi + inputValue_phar + inputValue_shoe + inputValue_spor + inputValue_trav;
  // alert(total_saving);
  // console.log(total_saving, inputValue_cosm, inputValue_elec);
  // const outputElement_total_saving = document.getElementById("total_saving");
  // outputElement_total_saving.innerHTML = `<hr><p><span style="font-size:20px; font-weight:600;">Total Savings: </span> ${total_saving} </p>`;
}

function reflect_elec() {
  const inputElement = document.getElementById("elec");
  const outputElement = document.getElementById("electronics_m");
  const outputElement_c = document.getElementById("electronics_c");

  var inputValue = inputElement.value;
  outputElement.innerHTML = `<p><strong>Electronics: </strong> ${inputValue} </p>`;

  inputValue_elec = ((inputElement.value * 3) / 100);
  outputElement_c.innerHTML = `<p><strong>Electronics: </strong> ${inputValue_elec}  (3% savings)</p>`;

  total_saving = inputValue_cosm + inputValue_elec + inputValue_fash + inputValue_groc + inputValue_home + inputValue_home + inputValue_hote + inputValue_kitc + inputValue_mobi + inputValue_phar + inputValue_shoe + inputValue_spor + inputValue_trav;
}

function reflect_fash() {
  const inputElement = document.getElementById("fash");
  const outputElement = document.getElementById("fashion_m");
  const outputElement_c = document.getElementById("fashion_c");

  var inputValue = inputElement.value;
  outputElement.innerHTML = `<p><strong>Fashion: </strong> ${inputValue} </p>`;

  inputValue_fash = ((inputElement.value * 15) / 100);
  outputElement_c.innerHTML = `<p><strong>Fashion: </strong> ${inputValue_fash}  (15% savings)</p>`;
  total_saving = inputValue_cosm + inputValue_elec + inputValue_fash + inputValue_groc + inputValue_home + inputValue_home + inputValue_hote + inputValue_kitc + inputValue_mobi + inputValue_phar + inputValue_shoe + inputValue_spor + inputValue_trav;

}

function reflect_gorc() {
  const inputElement = document.getElementById("groc");
  const outputElement = document.getElementById("grocery_m");
  const outputElement_c = document.getElementById("grocery_c");

  const inputValue = inputElement.value;
  outputElement.innerHTML = `<p><strong>Grocery: </strong> ${inputValue} </p>`;

  inputValue_groc = ((inputElement.value * 5) / 100);
  outputElement_c.innerHTML = `<p><strong>Grocery: </strong> ${inputValue_groc}  (5% savings) </p>`;
  total_saving = inputValue_cosm + inputValue_elec + inputValue_fash + inputValue_groc + inputValue_home + inputValue_home + inputValue_hote + inputValue_kitc + inputValue_mobi + inputValue_phar + inputValue_shoe + inputValue_spor + inputValue_trav;
}

function reflect_home() {
  const inputElement = document.getElementById("home");
  const outputElement = document.getElementById("home_m");
  const outputElement_c = document.getElementById("home_c");

  const inputValue = inputElement.value;
  outputElement.innerHTML = `<p><strong>Home Appliances: </strong> ${inputValue} </p>`;

  inputValue_home = ((inputElement.value * 10) / 100);
  outputElement_c.innerHTML = `<p><strong>Home Appliances: </strong> ${inputValue_home}  (10% savings)</p>`;
  total_saving = inputValue_cosm + inputValue_elec + inputValue_fash + inputValue_groc + inputValue_home + inputValue_home + inputValue_hote + inputValue_kitc + inputValue_mobi + inputValue_phar + inputValue_shoe + inputValue_spor + inputValue_trav;

}

function reflect_hote() {
  const inputElement = document.getElementById("hote");
  const outputElement = document.getElementById("hotel_m");
  const outputElement_c = document.getElementById("hotel_c");

  const inputValue = inputElement.value;
  outputElement.innerHTML = `<p><strong>Hotel Bookings: </strong> ${inputValue} </p>`;

  inputValue_hote = ((inputElement.value * 5) / 100);
  outputElement_c.innerHTML = `<p><strong>Hotel Bookings: </strong> ${inputValue_hote}  (5% savings) </p>`;
  total_saving = inputValue_cosm + inputValue_elec + inputValue_fash + inputValue_groc + inputValue_home + inputValue_home + inputValue_hote + inputValue_kitc + inputValue_mobi + inputValue_phar + inputValue_shoe + inputValue_spor + inputValue_trav;

}

function reflect_kitc() {
  const inputElement = document.getElementById("kitc");
  const outputElement = document.getElementById("kitchen_m");
  const outputElement_c = document.getElementById("kitchen_c");

  const inputValue = inputElement.value;
  outputElement.innerHTML = `<p><strong>Kitchen Appliances: </strong> ${inputValue} </p>`;

  inputValue_kitc = ((inputElement.value * 1) / 100);
  outputElement_c.innerHTML = `<p><strong>Kitchen Appliances: </strong> ${inputValue_kitc}  (1% savings)</p>`;
  total_saving = inputValue_cosm + inputValue_elec + inputValue_fash + inputValue_groc + inputValue_home + inputValue_home + inputValue_hote + inputValue_kitc + inputValue_mobi + inputValue_phar + inputValue_shoe + inputValue_spor + inputValue_trav;

}

function reflect_mobi() {
  const inputElement = document.getElementById("mobi");
  const outputElement = document.getElementById("mobile_m");
  const outputElement_c = document.getElementById("mobile_c");

  const inputValue = inputElement.value;
  outputElement.innerHTML = `<p><strong>Mobile & TV: </strong> ${inputValue} </p>`;

  inputValue_mobi = ((inputElement.value * 3) / 100);
  outputElement_c.innerHTML = `<p><strong>Mobile & TV: </strong> ${inputValue_mobi}  (3% savings) </p>`;
  total_saving = inputValue_cosm + inputValue_elec + inputValue_fash + inputValue_groc + inputValue_home + inputValue_home + inputValue_hote + inputValue_kitc + inputValue_mobi + inputValue_phar + inputValue_shoe + inputValue_spor + inputValue_trav;

}

function reflect_phar() {
  const inputElement = document.getElementById("phar");
  const outputElement = document.getElementById("pharmacy_m");
  const outputElement_c = document.getElementById("pharmacy_c");

  const inputValue = inputElement.value;
  outputElement.innerHTML = `<p><strong>Pharmacy: </strong> ${inputValue} </p>`;

  inputValue_phar = ((inputElement.value * 10) / 100);
  outputElement_c.innerHTML = `<p><strong>Pharmacy: </strong> ${inputValue_phar}  (10% savings)</p>`;
  total_saving = inputValue_cosm + inputValue_elec + inputValue_fash + inputValue_groc + inputValue_home + inputValue_home + inputValue_hote + inputValue_kitc + inputValue_mobi + inputValue_phar + inputValue_shoe + inputValue_spor + inputValue_trav;

}

function reflect_shoe() {
  const inputElement = document.getElementById("shoe");
  const outputElement = document.getElementById("shoes_m");
  const outputElement_c = document.getElementById("shoes_c");

  const inputValue = inputElement.value;
  outputElement.innerHTML = `<p><strong>Shoes: </strong> ${inputValue} </p>`;

  inputValue_shoe = ((inputElement.value * 5) / 100);
  outputElement_c.innerHTML = `<p><strong>Shoes: </strong> ${inputValue_shoe}  (5% savings)</p>`;
  total_saving = inputValue_cosm + inputValue_elec + inputValue_fash + inputValue_groc + inputValue_home + inputValue_home + inputValue_hote + inputValue_kitc + inputValue_mobi + inputValue_phar + inputValue_shoe + inputValue_spor + inputValue_trav;

}

function reflect_spor() {
  const inputElement = document.getElementById("spor");
  const outputElement = document.getElementById("sports_m");
  const outputElement_c = document.getElementById("sports_c");

  const inputValue = inputElement.value;
  outputElement.innerHTML = `<p><strong>Sports & Fitness: </strong> ${inputValue} </p>`;

  inputValue_spor = ((inputElement.value * 2) / 100);
  outputElement_c.innerHTML = `<p><strong>Sports & Fitness: </strong> ${inputValue_spor}  (2% savings)</p>`;
  total_saving = inputValue_cosm + inputValue_elec + inputValue_fash + inputValue_groc + inputValue_home + inputValue_home + inputValue_hote + inputValue_kitc + inputValue_mobi + inputValue_phar + inputValue_shoe + inputValue_spor + inputValue_trav;

}

function reflect_trav() {
  const inputElement = document.getElementById("trav");
  const outputElement = document.getElementById("travel_m");;
  const outputElement_c = document.getElementById("travel_c");

  const inputValue = inputElement.value;
  outputElement.innerHTML = `<p><strong>Travel & Flights: </strong> ${inputValue} </p>`;

  inputValue_trav = ((inputElement.value * 15) / 100);
  outputElement_c.innerHTML = `<p><strong>Travel & Flights: </strong> ${inputValue_trav}  (15% savings)</p>`;
  total_saving = inputValue_cosm + inputValue_elec + inputValue_fash + inputValue_groc + inputValue_home + inputValue_home + inputValue_hote + inputValue_kitc + inputValue_mobi + inputValue_phar + inputValue_shoe + inputValue_spor + inputValue_trav;

}
.category-list p {
  padding: 12px 0 8px 0;
  margin: 0;
}

.res-container {
  display: flex;
  justify-content: space-around;
}

.fields {
  text-align: center;
  margin-bottom: 30px;
}
<div class="container">
  <div class="fields">
    <label for="user-input">Enter Total Planned Expense</label><br><br>
    <input id="user-input-box" name="input-box" placeholder="total budget...">
    <button onclick="Calculate()">Calculate</button> <br />
  </div>

  <div class="res-container">
    <div id="main-inputs">
      <div class="category-list">
        <h2>Category Lists</h2>
        <div id="cosmetics">
          <p><strong>Cosmetics</strong></p><input type="text" id="cosm" oninput="reflect_cosm()">
        </div>
        <div id="electronics">
          <p><strong>Electronics</strong></p><input type="text" id="elec" oninput="reflect_elec()">
        </div>
        <div id="fashion">
          <p><strong>Fashion</strong></p><input type="text" id="fash" oninput="reflect_fash()">
        </div>
        <div id="grocery">
          <p><strong>Grocery</strong></p><input type="text" id="groc" oninput="reflect_gorc()">
        </div>
        <div id="home_appliances">
          <p><strong>Home Appliances</strong></p><input type="text" id="home" oninput="reflect_home()">
        </div>
        <div id="hotel_bookings">
          <p><strong>Hotel Bookings</strong></p><input type="text" id="hote" oninput="reflect_hote()">
        </div>
        <div id="kitchen">
          <p><strong>Kitchen Appliances</strong></p><input type="text" id="kitc" oninput="reflect_kitc()">
        </div>
        <div id="mobiletv">
          <p><strong>Mobile TV</strong></p><input type="text" id="mobi" oninput="reflect_mobi()">
        </div>
        <div id="pharmacy">
          <p><strong>Pharmacy</strong></p><input type="text" id="phar" oninput="reflect_phar()">
        </div>
        <div id="shoes">
          <p><strong>Shoes</strong></p><input type="text" id="shoe" oninput="reflect_shoe()">
        </div>
        <div id="sports">
          <p><strong>Sports</strong></p><input type="text" id="spor" oninput="reflect_spor()">
        </div>
        <div id="travel">
          <p><strong>Travel & Flights</strong></p><input type="text" id="trav" oninput="reflect_trav()">
        </div>
      </div>
    </div>
    <div class="main-price">
      <h2>Without Comission</h2>
      <div id="cosmetics_m"></div>
      <div id="electronics_m"></div>
      <div id="fashion_m"></div>
      <div id="grocery_m"></div>
      <div id="home_m"></div>
      <div id="hotel_m"></div>
      <div id="kitchen_m"></div>
      <div id="mobile_m"></div>
      <div id="pharmacy_m"></div>
      <div id="shoes_m"></div>
      <div id="sports_m"></div>
      <div id="travel_m"></div>
    </div>
    <div id="comission-price">
      <h2>With Comission Savings</h2>
      <div id="cosmetics_c"></div>
      <div id="electronics_c"></div>
      <div id="fashion_c"></div>
      <div id="grocery_c"></div>
      <div id="home_c"></div>
      <div id="hotel_c"></div>
      <div id="kitchen_c"></div>
      <div id="mobile_c"></div>
      <div id="pharmacy_c"></div>
      <div id="shoes_c"></div>
      <div id="sports_c"></div>
      <div id="travel_c"></div>
      <div id="total_saving"></div>
    </div>
  </div>
</div>

javascript
1个回答
0
投票

.category-list p{
    padding: 12px 0 8px 0;
    margin: 0;
}
.res-container{
    display: flex;
    justify-content: space-around;
}
.fields{
    text-align: center;
    margin-bottom: 30px;
}
input, button{
    padding: 8px;
}
#textBx{
    margin-bottom: 10px;
}
#btn-check{
    background: #022A68;
    border-color: #022A68;
    color: white;
    outline: none;
}
#user-input-box, input{
    width: 250px;
}
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
    <script>
        function Calculate() {
            var userInput = document.getElementById("user-input-box").value;

            var cosmetics = (userInput * 5) / 100;
            var electronics = (userInput * 10) / 100;
            var fashion = (userInput * 20) / 100;
            var grocery = (userInput * 0) / 100;
            var home_appliances = (userInput * 0) / 100;
            var hotel_bookings = (userInput * 10) / 100;
            var kitchen = (userInput * 10) / 100;
            var mobiletv = (userInput * 10) / 100;
            var pharmacy = (userInput * 5) / 100;
            var shoes = (userInput * 10) / 100;
            var sports = (userInput * 10) / 100;
            var travel = (userInput * 10) / 100;

            var total_price = cosmetics + electronics + fashion + grocery + home_appliances + hotel_bookings + kitchen + mobiletv + pharmacy + shoes + sports + travel;

            // assign value to input editable field
            document.getElementById("cosm").value = cosmetics;
            document.getElementById("elec").value = electronics;
            document.getElementById("fash").value = fashion;
            document.getElementById("groc").value = grocery;
            document.getElementById("home").value = home_appliances;
            document.getElementById("hote").value = hotel_bookings;
            document.getElementById("kitc").value = kitchen;
            document.getElementById("mobi").value = mobiletv;
            document.getElementById("phar").value = pharmacy;
            document.getElementById("shoe").value = shoes;
            document.getElementById("spor").value = sports;
            document.getElementById("trav").value = travel;

            //without comission display
            document.getElementById('cosmetics_m').innerHTML = `<p><strong>Cosmetics: </strong> ${cosmetics} </p>`;
            document.getElementById('electronics_m').innerHTML = `<p><strong>Electronics: </strong> ${electronics} </p>`;
            document.getElementById('fashion_m').innerHTML = `<p><strong>Fashion: </strong> ${fashion} </p>`;
            document.getElementById('grocery_m').innerHTML = `<p><strong>Grocery: </strong> ${grocery} </p>`;
            document.getElementById('home_m').innerHTML = `<p><strong>Home Appliances: </strong> ${home_appliances} </p>`;
            document.getElementById('hotel_m').innerHTML = `<p><strong>Hotel Bookings: </strong> ${hotel_bookings} </p>`;
            document.getElementById('kitchen_m').innerHTML = `<p><strong>Kitchen Appliances: </strong> ${kitchen} </p>`;
            document.getElementById('mobile_m').innerHTML = `<p><strong>Mobile & TV: </strong> ${mobiletv} </p>`;
            document.getElementById('pharmacy_m').innerHTML = `<p><strong>Pharmacy: </strong> ${pharmacy} </p>`;
            document.getElementById('shoes_m').innerHTML = `<p><strong>Shoes: </strong> ${shoes} </p>`;
            document.getElementById('sports_m').innerHTML = `<p><strong>Sports & Fitness: </strong> ${sports} </p>`;
            document.getElementById('travel_m').innerHTML = `<p><strong>Travel & Flights: </strong> ${travel} </p>`;

            cosm_saving = (cosmetics * 5) / 100;
            elec_saving = (electronics * 3) / 100;
            fash_saving = (fashion * 15) / 100;
            groc_saving = (grocery * 5) / 100;
            home_saving = (home_appliances * 10) / 100;
            hote_saving = (hotel_bookings * 5) / 100;
            kitc_saving = (kitchen * 1) / 100;
            mobi_saving = (mobiletv * 3) / 100;
            phar_saving = (pharmacy * 10) / 100;
            shoe_saving = (shoes * 5) / 100;
            spor_saving = (sports * 2) / 100;
            trav_saving = (travel * 15) / 100;

            total_saving = (cosm_saving + elec_saving + fash_saving + groc_saving + home_saving + hote_saving + kitc_saving + mobi_saving + phar_saving + shoe_saving + spor_saving + trav_saving);

            //with comission
            document.getElementById('cosmetics_c').innerHTML = `<p><strong>Cosmetics: </strong> ${cosm_saving} (5% savings)</p>`;
            document.getElementById('electronics_c').innerHTML = `<p><strong>Electronics: </strong> ${elec_saving} (3% savings) </p>`;
            document.getElementById('fashion_c').innerHTML = `<p><strong>Fashion: </strong> ${fash_saving} (15% savings)</p>`;
            document.getElementById('grocery_c').innerHTML = `<p><strong>Grocery: </strong> ${groc_saving} (5% savings)</p>`;
            document.getElementById('home_c').innerHTML = `<p><strong>Home Appliances: </strong> ${home_saving} (10% savings) </p>`;
            document.getElementById('hotel_c').innerHTML = `<p><strong>Hotel Bookings: </strong> ${hote_saving} (5% savings) </p>`;
            document.getElementById('kitchen_c').innerHTML = `<p><strong>Kitchen Appliances: </strong> ${kitc_saving} (1% savings) </p>`;
            document.getElementById('mobile_c').innerHTML = `<p><strong>Mobile & TV: </strong> ${mobi_saving} (3% savings) </p>`;
            document.getElementById('pharmacy_c').innerHTML = `<p><strong>Pharmacy: </strong> ${phar_saving} (10% savings) </p>`;
            document.getElementById('shoes_c').innerHTML = `<p><strong>Shoes: </strong> ${shoe_saving} (5% savings) </p>`;
            document.getElementById('sports_c').innerHTML = `<p><strong>Sports & Fitness: </strong> ${spor_saving} (2% savings)</p>`;
            document.getElementById('travel_c').innerHTML = `<p><strong>Travel & Flights: </strong> ${trav_saving} (15% savings) </p>`;
            document.getElementById('total_saving').innerHTML = `<hr><p><span style="font-size:20px; font-weight:600;">Total Savings: </span> ${total_saving} </p>`;
            // document.getElementById('cosmetics').innerHTML = `<label for="i1">Cosmetics</label>     <input id="i1" name="input1" > ${cosmetics} `;
            // document.getElementById('electronics').innerHTML = `<p><strong>Cosmetics: </strong> ${cosmetics} </p>`;

        }
        var elec_saving, total_saving, cosm_saving, fash_saving, groc_saving, home_saving, hote_saving, mobi_saving, phar_saving, shoe_saving, spor_saving, trav_saving;
        var inputValue_cosm, inputValue_elec, inputValue_fash, inputValue_groc, inputValue_home, inputValue_hote, inputValue_hote, inputValue_kitc, inputValue_mobi, inputValue_phar, inputValue_shoe, inputValue_spor, inputValue_trav;
        function reflect_cosm() {
            // Get the input element
            const inputElement = document.getElementById("cosm");
            // Get the output element
            const outputElement = document.getElementById("cosmetics_m");
            const outputElement_c = document.getElementById("cosmetics_c");
            // const inputElement_c_e = document.getElementById("elec");


            // Get and display the value in the output
            const inputValue = inputElement.value;
            outputElement.innerHTML = `<p><strong>Cosmetics: </strong> ${inputValue} </p>`;

            inputValue_cosm = ((inputElement.value * 5) / 100);
            cosm_saving = inputValue_cosm;
            outputElement_c.innerHTML = `<p><strong>Cosmetics: </strong> ${inputValue_cosm} (5% savings) </p>`;

            // console.log((inputElement_c_e.value * 3) / 100, inputElement.value);
            total_saving = cosm_saving + elec_saving + fash_saving + groc_saving + home_saving + hote_saving + kitc_saving + mobi_saving + phar_saving + shoe_saving + spor_saving + trav_saving;
            console.log(total_saving);
            console.log(inputValue_cosm, elec_saving, fash_saving, groc_saving, home_saving, hote_saving, kitc_saving, mobi_saving, phar_saving, shoe_saving, spor_saving, trav_saving);
            console.log(trav_saving);

            document.getElementById('total_saving').innerHTML = `<hr><p><span style="font-size:20px; font-weight:600;">Total Savings: </span> ${total_saving} </p>`;
        }
        function reflect_elec() {
            const inputElement = document.getElementById("elec");
            const outputElement = document.getElementById("electronics_m");
            const outputElement_c = document.getElementById("electronics_c");

            var inputValue = inputElement.value;
            outputElement.innerHTML = `<p><strong>Electronics: </strong> ${inputValue} </p>`;

            inputValue_elec = ((inputElement.value * 3) / 100);
            elec_saving = inputValue_elec;
            outputElement_c.innerHTML = `<p><strong>Electronics: </strong> ${inputValue_elec}  (3% savings)</p>`;

            total_saving = cosm_saving + elec_saving + fash_saving + groc_saving + home_saving + hote_saving + kitc_saving + mobi_saving + phar_saving + shoe_saving + spor_saving + trav_saving;
            document.getElementById('total_saving').innerHTML = `<hr><p><span style="font-size:20px; font-weight:600;">Total Savings: </span> ${total_saving} </p>`;
        }
        function reflect_fash() {
            const inputElement = document.getElementById("fash");
            const outputElement = document.getElementById("fashion_m");
            const outputElement_c = document.getElementById("fashion_c");

            var inputValue = inputElement.value;
            outputElement.innerHTML = `<p><strong>Fashion: </strong> ${inputValue} </p>`;

            inputValue_fash = ((inputElement.value * 15) / 100);
            fash_saving = inputValue_fash;
            outputElement_c.innerHTML = `<p><strong>Fashion: </strong> ${inputValue_fash}  (15% savings)</p>`;
            total_saving = cosm_saving + elec_saving + fash_saving + groc_saving + home_saving + hote_saving + kitc_saving + mobi_saving + phar_saving + shoe_saving + spor_saving + trav_saving;
            document.getElementById('total_saving').innerHTML = `<hr><p><span style="font-size:20px; font-weight:600;">Total Savings: </span> ${total_saving} </p>`;

        }
        function reflect_gorc() {
            const inputElement = document.getElementById("groc");
            const outputElement = document.getElementById("grocery_m");
            const outputElement_c = document.getElementById("grocery_c");

            const inputValue = inputElement.value;
            outputElement.innerHTML = `<p><strong>Grocery: </strong> ${inputValue} </p>`;

            inputValue_groc = ((inputElement.value * 5) / 100);
            groc_saving = inputValue_groc;
            outputElement_c.innerHTML = `<p><strong>Grocery: </strong> ${inputValue_groc}  (5% savings) </p>`;
            total_saving = cosm_saving + elec_saving + fash_saving + groc_saving + home_saving + hote_saving + kitc_saving + mobi_saving + phar_saving + shoe_saving + spor_saving + trav_saving;
            document.getElementById('total_saving').innerHTML = `<hr><p><span style="font-size:20px; font-weight:600;">Total Savings: </span> ${total_saving} </p>`;
        }
        function reflect_home() {
            const inputElement = document.getElementById("home");
            const outputElement = document.getElementById("home_m");
            const outputElement_c = document.getElementById("home_c");

            const inputValue = inputElement.value;
            outputElement.innerHTML = `<p><strong>Home Appliances: </strong> ${inputValue} </p>`;

            inputValue_home = ((inputElement.value * 10) / 100);
            home_saving = inputValue_home;
            outputElement_c.innerHTML = `<p><strong>Home Appliances: </strong> ${inputValue_home}  (10% savings)</p>`;
            total_saving = cosm_saving + elec_saving + fash_saving + groc_saving + home_saving + hote_saving + kitc_saving + mobi_saving + phar_saving + shoe_saving + spor_saving + trav_saving;
            document.getElementById('total_saving').innerHTML = `<hr><p><span style="font-size:20px; font-weight:600;">Total Savings: </span> ${total_saving} </p>`;

        }
        function reflect_hote() {
            const inputElement = document.getElementById("hote");
            const outputElement = document.getElementById("hotel_m");
            const outputElement_c = document.getElementById("hotel_c");

            const inputValue = inputElement.value;
            outputElement.innerHTML = `<p><strong>Hotel Bookings: </strong> ${inputValue} </p>`;

            inputValue_hote = ((inputElement.value * 5) / 100);
            hote_saving = inputValue_hote;
            outputElement_c.innerHTML = `<p><strong>Hotel Bookings: </strong> ${inputValue_hote}  (5% savings) </p>`;
            total_saving = cosm_saving + elec_saving + fash_saving + groc_saving + home_saving + hote_saving + kitc_saving + mobi_saving + phar_saving + shoe_saving + spor_saving + trav_saving;
            document.getElementById('total_saving').innerHTML = `<hr><p><span style="font-size:20px; font-weight:600;">Total Savings: </span> ${total_saving} </p>`;

        }
        function reflect_kitc() {
            const inputElement = document.getElementById("kitc");
            const outputElement = document.getElementById("kitchen_m");
            const outputElement_c = document.getElementById("kitchen_c");

            const inputValue = inputElement.value;
            outputElement.innerHTML = `<p><strong>Kitchen Appliances: </strong> ${inputValue} </p>`;

            inputValue_kitc = ((inputElement.value * 1) / 100);
            kitc_saving = inputValue_kitc;
            outputElement_c.innerHTML = `<p><strong>Kitchen Appliances: </strong> ${inputValue_kitc}  (1% savings)</p>`;
            total_saving = cosm_saving + elec_saving + fash_saving + groc_saving + home_saving + hote_saving + kitc_saving + mobi_saving + phar_saving + shoe_saving + spor_saving + trav_saving;
            document.getElementById('total_saving').innerHTML = `<hr><p><span style="font-size:20px; font-weight:600;">Total Savings: </span> ${total_saving} </p>`;

        }
        function reflect_mobi() {
            const inputElement = document.getElementById("mobi");
            const outputElement = document.getElementById("mobile_m");
            const outputElement_c = document.getElementById("mobile_c");

            const inputValue = inputElement.value;
            outputElement.innerHTML = `<p><strong>Mobile & TV: </strong> ${inputValue} </p>`;

            inputValue_mobi = ((inputElement.value * 3) / 100);
            mobi_saving = inputValue_mobi;
            outputElement_c.innerHTML = `<p><strong>Mobile & TV: </strong> ${inputValue_mobi}  (3% savings) </p>`;
            total_saving = cosm_saving + elec_saving + fash_saving + groc_saving + home_saving + hote_saving + kitc_saving + mobi_saving + phar_saving + shoe_saving + spor_saving + trav_saving;
            document.getElementById('total_saving').innerHTML = `<hr><p><span style="font-size:20px; font-weight:600;">Total Savings: </span> ${total_saving} </p>`;

        }
        function reflect_phar() {
            const inputElement = document.getElementById("phar");
            const outputElement = document.getElementById("pharmacy_m");
            const outputElement_c = document.getElementById("pharmacy_c");

            const inputValue = inputElement.value;
            outputElement.innerHTML = `<p><strong>Pharmacy: </strong> ${inputValue} </p>`;

            inputValue_phar = ((inputElement.value * 10) / 100);
            phar_saving = inputValue_phar;
            outputElement_c.innerHTML = `<p><strong>Pharmacy: </strong> ${inputValue_phar}  (10% savings)</p>`;
            total_saving = cosm_saving + elec_saving + fash_saving + groc_saving + home_saving + hote_saving + kitc_saving + mobi_saving + phar_saving + shoe_saving + spor_saving + trav_saving;
            document.getElementById('total_saving').innerHTML = `<hr><p><span style="font-size:20px; font-weight:600;">Total Savings: </span> ${total_saving} </p>`;

        }
        function reflect_shoe() {
            const inputElement = document.getElementById("shoe");
            const outputElement = document.getElementById("shoes_m");
            const outputElement_c = document.getElementById("shoes_c");

            const inputValue = inputElement.value;
            outputElement.innerHTML = `<p><strong>Shoes: </strong> ${inputValue} </p>`;

            inputValue_shoe = ((inputElement.value * 5) / 100);
            shoe_saving = inputValue_shoe;
            outputElement_c.innerHTML = `<p><strong>Shoes: </strong> ${inputValue_shoe}  (5% savings)</p>`;
            total_saving = cosm_saving + elec_saving + fash_saving + groc_saving + home_saving + hote_saving + kitc_saving + mobi_saving + phar_saving + shoe_saving + spor_saving + trav_saving;
            document.getElementById('total_saving').innerHTML = `<hr><p><span style="font-size:20px; font-weight:600;">Total Savings: </span> ${total_saving} </p>`;

        }
        function reflect_spor() {
            const inputElement = document.getElementById("spor");
            const outputElement = document.getElementById("sports_m");
            const outputElement_c = document.getElementById("sports_c");

            const inputValue = inputElement.value;
            outputElement.innerHTML = `<p><strong>Sports & Fitness: </strong> ${inputValue} </p>`;

            inputValue_spor = ((inputElement.value * 2) / 100);
            spor_saving = inputValue_spor;
            outputElement_c.innerHTML = `<p><strong>Sports & Fitness: </strong> ${inputValue_spor}  (2% savings)</p>`;
            total_saving = cosm_saving + elec_saving + fash_saving + groc_saving + home_saving + hote_saving + kitc_saving + mobi_saving + phar_saving + shoe_saving + spor_saving + trav_saving;
            document.getElementById('total_saving').innerHTML = `<hr><p><span style="font-size:20px; font-weight:600;">Total Savings: </span> ${total_saving} </p>`;

        }
        function reflect_trav() {
            const inputElement = document.getElementById("trav");
            const outputElement = document.getElementById("travel_m");;
            const outputElement_c = document.getElementById("travel_c");

            const inputValue = inputElement.value;
            outputElement.innerHTML = `<p><strong>Travel & Flights: </strong> ${inputValue} </p>`;

            inputValue_trav = ((inputElement.value * 15) / 100);
            trav_saving = inputValue_trav;
            outputElement_c.innerHTML = `<p><strong>Travel & Flights: </strong> ${inputValue_trav}  (15% savings)</p>`;
            total_saving = cosm_saving + elec_saving + fash_saving + groc_saving + home_saving + hote_saving + kitc_saving + mobi_saving + phar_saving + shoe_saving + spor_saving + trav_saving;
            document.getElementById('total_saving').innerHTML = `<hr><p><span style="font-size:20px; font-weight:600;">Total Savings: </span> ${total_saving} </p>`;

        }
    </script>
</head>

<body>
    <!-- <form> -->
    <!-- readibility checker input box -->
    <div class="container">
        <h1 style="text-align: center;">Comission Calculator</h1>
        <div class="fields">
            <label for="user-input" >Enter Total Planned Expense</label><br><br>
            <input id="user-input-box" name="input-box" placeholder="total budget...">
            <button onclick="Calculate()" id="btn-check">Calculate</button> <br />
            <!-- </form> -->
        </div>

        <div class="res-container">
            <div id="main-inputs">
                <div class="category-list">
                    <h2>Category Lists</h2>
                    <div id="cosmetics">
                        <p><strong>Cosmetics</strong></p><input type="text" id="cosm" oninput="reflect_cosm()">
                    </div>
                    <div id="electronics">
                        <p><strong>Electronics</strong></p><input type="text" id="elec" oninput="reflect_elec()">
                    </div>
                    <div id="fashion">
                        <p><strong>Fashion</strong></p><input type="text" id="fash" oninput="reflect_fash()">
                    </div>
                    <div id="grocery">
                        <p><strong>Grocery</strong></p><input type="text" id="groc" oninput="reflect_gorc()">
                    </div>
                    <div id="home_appliances">
                        <p><strong>Home Appliances</strong></p><input type="text" id="home" oninput="reflect_home()">
                    </div>
                    <div id="hotel_bookings">
                        <p><strong>Hotel Bookings</strong></p><input type="text" id="hote" oninput="reflect_hote()">
                    </div>
                    <div id="kitchen">
                        <p><strong>Kitchen Appliances</strong></p><input type="text" id="kitc" oninput="reflect_kitc()">
                    </div>
                    <div id="mobiletv">
                        <p><strong>Mobile TV</strong></p><input type="text" id="mobi" oninput="reflect_mobi()">
                    </div>
                    <div id="pharmacy">
                        <p><strong>Pharmacy</strong></p><input type="text" id="phar" oninput="reflect_phar()">
                    </div>
                    <div id="shoes">
                        <p><strong>Shoes</strong></p><input type="text" id="shoe" oninput="reflect_shoe()">
                    </div>
                    <div id="sports">
                        <p><strong>Sports</strong></p><input type="text" id="spor" oninput="reflect_spor()">
                    </div>
                    <div id="travel">
                        <p><strong>Travel & Flights</strong></p><input type="text" id="trav" oninput="reflect_trav()">
                    </div>
                </div>
            </div>
            <div class="main-price">
                <h2>Without Comission</h2>
                <div id="cosmetics_m"></div>
                <div id="electronics_m"></div>
                <div id="fashion_m"></div>
                <div id="grocery_m"></div>
                <div id="home_m"></div>
                <div id="hotel_m"></div>
                <div id="kitchen_m"></div>
                <div id="mobile_m"></div>
                <div id="pharmacy_m"></div>
                <div id="shoes_m"></div>
                <div id="sports_m"></div>
                <div id="travel_m"></div>
            </div>
            <div id="comission-price">
                <h2>With Comission Savings</h2>
                <div id="cosmetics_c"></div>
                <div id="electronics_c"></div>
                <div id="fashion_c"></div>
                <div id="grocery_c"></div>
                <div id="home_c"></div>
                <div id="hotel_c"></div>
                <div id="kitchen_c"></div>
                <div id="mobile_c"></div>
                <div id="pharmacy_c"></div>
                <div id="shoes_c"></div>
                <div id="sports_c"></div>
                <div id="travel_c"></div>
                <div id="total_saving"></div>
            </div>
        </div>
    </div>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.