不同的方法:简单提示计算器

时间:2018-11-10 22:25:03

标签: javascript html

是否有可能像我在下面开始做的那样,在服务变量下的tip()函数中分配不同服务级别的值?我知道替代的并且可能是首选的解决方案是将这些值分配给选项值,但想知道是否也可以使用if语句来完成。

function tip() {

  var tipp = document.getElementById("bill").value;
  var split = document.getElementById("billsplit").value;
  var service = document.getElementById("service").value; //good=.3,ok=.25,bad=.2
  if service = "Good" {
    document.getElementById = ("service").innerHTML = .3;
  }


  document.getElementById("result").innerHTML = (tipp * service) / split;

}
Enter Total Bill<br><br>
<input type="number" name="bill" id="bill">
<br><br> How was the Service <br><br>
<select id="service">
  <option value="Good">Good</option>
  <option value="Bad">Bad</option>
  <option value="ok">ok</option>
</select>

<br><br> How many People are sharing Bill?<br><br>

<input type="number" name="billsplit" id="billsplit">

<button type="button" onclick="tip()">CALCULATE</button>

<br><br>Result : <span id="result"></span>

2 个答案:

答案 0 :(得分:0)

您可以使用关联数组。您的tip()函数可能是这样的。

function tip() {
            let service_values = {
                "Good": 0.3,
                "ok": 0.25,
                "Bad": 0.2
            };

            var tipp = document.getElementById("bill").value;
            var split = document.getElementById("billsplit").value;
            var service_label = document.getElementById("service").value; //good=.3,ok=.25,bad=.2
            let service = service_values[service_label];


            document.getElementById("result").innerHTML= (tipp*service)/split;

        }

编辑:检查下面的代码段。

<!DOCTYPE html>
<html>
<h3> Tip Calculator <h3>

        <script>

            function tip() {
                let service_values = {
                    "Good": 0.3,
                    "ok": 0.25,
                    "Bad": 0.2
                };

                var tipp = document.getElementById("bill").value;
                var split = document.getElementById("billsplit").value;
                var service_label = document.getElementById("service").value; //good=.3,ok=.25,bad=.2
                let service = service_values[service_label];


                document.getElementById("result").innerHTML= (tipp*service)/split;

            }
        </script>

        <body>

        Enter Total Bill<br><br>
        <input type="number" name="bill" id="bill" value="10">
        <br><br>

        How was the Service <br><br>
        <select id="service">
            <option value ="Good">Good</option>
            <option value ="Bad">Bad</option>
            <option value ="ok">ok</option>
        </select>

        <br><br>
        How many People are sharing Bill?<br><br>

        <input type="number" name="billsplit" id="billsplit" value="1">

        <button type="button" onclick="tip()">CALCULATE</button>

        <br><br>Result : <span id="result"></span>

        </body>

</html>

答案 1 :(得分:0)

您可以使用对象根据服务等级映射值。注意:在对它们进行任何计算之前,您需要将输入值从字符串强制转换为数字。

class SearchScreen(Screen):
    location = StringProperty('No location')   
    def set_location(self, address):
        self.location = str(address)
        self.manager.current = "ForecastScreen"


class ForecastScreen(Screen):
    #code

sm=Builder.load_file('weather.kv')
class WeatherApp(App):
    def build(self):
        Window.bind(on_keyboard=self.on_key)
        return sm

    def on_key(self, window, key, *args):
        if key == 27:  # the esc key
            if self.screen_manager.current_screen.name == "SearchScreen":
                return False  # exit the app from this page
            elif self.screen_manager.current_screen.name == "ForecastScreen":
                self.screen_manager.current = "SearchScreen"
                return True

if __name__ == "__main__":
    WeatherApp().run()
// cache all the needed elements
const billTotal = document.querySelector('#bill');
const splitValue = document.querySelector('#split');
const service = document.querySelector('#service');
const result = document.querySelector('#result');
const button = document.querySelector('button');

// use a event listener instead of an inline function
button.addEventListener('click', calculate, false);

// map the values to service terms
const serviceMap = {
  good: 0.3,
  ok: 0.25,
  bad: 0.2
}

function calculate() {

  // get the input values
  const bill = Number(billTotal.value);
  const split = Number(splitValue.value);

  // get the selected service grade
  const serviceGrade = service.options[service.selectedIndex].value;

  // get the service value from the object using the grade as the key
  const serviceValue = serviceMap[serviceGrade];

  // perform the calculation
  const total = ((bill * serviceValue) / split).toFixed(2);

  // output the result with `textContent`
  result.textContent = `Total ${total}  ((${bill} * ${serviceValue}) / ${split})`;
}
input, button, div {
  display: block;
  margin-bottom: 0.5em;
}