Javascript 如何跟踪选择的案例并将值传递给函数

Javascript 如何跟踪选择的案例并将值传递给函数,javascript,function,switch-statement,formula,Javascript,Function,Switch Statement,Formula,这是一个指向工作js的链接,其中 a) 用户选择一个类别,并相应地填充产品下拉列表 b) 根据产品显示瓦数。两者都使用switch语句 我正在努力学习如何做以下事情: 1) 跟踪productChange功能中的案例。页面上显示了哪个瓦数,以便我可以将该瓦数的数值传递给函数(每日能耗) 2) 我的最终目标是确保dailyEnergyConsumption函数获得进行计算所需的值。我想在点击4个按钮中的任何一个时显示它 我的尝试(方向/代码/一些伪代码)用JS注释。 我试图定义我需要的所有函数

这是一个指向工作js的链接,其中

a) 用户选择一个类别,并相应地填充产品下拉列表

b) 根据产品显示瓦数。两者都使用switch语句


我正在努力学习如何做以下事情:

1) 跟踪productChange功能中的案例。页面上显示了哪个瓦数,以便我可以将该瓦数的数值传递给函数(每日能耗)

2) 我的最终目标是确保dailyEnergyConsumption函数获得进行计算所需的值。我想在点击4个按钮中的任何一个时显示它

我的尝试(方向/代码/一些伪代码)用JS注释。 我试图定义我需要的所有函数

谢谢

    var category = document.getElementById('ddl'),
      product = document.getElementById('products'),
      wattage = document.getElementById('wattage'),
      refrigerators = new Array('Artic King AEB', 'Artic King ATMA', 'Avanti Compact', 'Bosch SS'),
      dishWasher = new Array('Bosch - SHXUC', 'Asko DS', 'Blomberg', 'Amana');

    var categoryChange = function() {
      switch (category.value) {
        case 'refrigerators':
          products.options.length = 0;
          for (i = 0; i < refrigerators.length; i++) {
            createOption(products, refrigerators[i], refrigerators[i]);
          }
          break;
        case 'dishWasher':
          products.options.length = 0;
          for (i = 0; i < dishWasher.length; i++) {
            createOption(products, dishWasher[i], dishWasher[i]);
          }
          break;
        default:
          products.options.length = 0;
          break;
      }

      productChange();
    }

    var productChange = function() {
      switch (product.value) {
        case 'Artic King AEB':
          wattage.innerHTML = 400;
          break;

        case 'Artic King ATMA':
          wattage.innerHTML = 500;
          break;

        case 'Avanti Compact':
          wattage.innerHTML = 340;
          break;

        case 'Bosch SS':
          wattage.innerHTML = 214;
          break;

        case 'Bosch - SHXUC':
          wattage.innerHTML = 200;
          break;

        case 'Asko DS':
          wattage.innerHTML = 187;
          break;

        case 'Blomberg':
          wattage.innerHTML = 236;
          break;

        case 'Amana':
          wattage.innerHTML = 150;
          break;

        default:
          wattage.innerHTML = 'N/A'
          break;
      }
    }

    function createOption(ddl, text, value) {
      var opt = document.createElement('option');
      opt.value = value;
      opt.text = text;
      ddl.options.add(opt);
    }

    category.addEventListener('change', categoryChange);
    product.addEventListener('change', productChange);





    /* Attempt starts from below
     
    function findWattage(){

    // span on the page that displays wattage
    	var wattage = document.getElementById('wattage');
        
    // created a new variable to find which case is selected.
    	var wattageOnPage = wattage.something that will track which case is selected.value;
    	
        // do i have to equate wattage with wattageOnPage
    	
    	// 
        return wattageOnPage;
    }


    function estimatedDailyUse(dailyUse){
      
    			if(button.onclick.id =="h1"){
    				return dailyUse = 1;
    			}
    	
    			else if (button.onclick.id =="h3"){
    				return dailyUse = 3;
    			}
    		
    			else if (button.onclick.id =="h6"){
    				return dailyUse = 6;
    			}
    			
    			else if (button.onclick.id =="h24"){
    				return dailyUse = 24;
    		}
    	
    	}
    	
    		dailyEnergyConsumption = function() {

    	// final display div
    	var daily = document.getElementById('daily');
    	
    	//initialize the variable
    	var dailyEnergyConsumed = 0;
    	
    	//Read the wattage that is displayed. 
    	
    	//	Track the 4 buttons and gather which button is clicked and accordingly pass that to the formula
    	
    	   		
    		// so whenever I will need the selected wattage I can call it like this and get value into my formula
        wattageOnPage = findWattage();
    			
    		//Formula (1,500 W × 1) ÷ 1,000 = 1.5 kWh
    		var dailyEnergyConsumed = (wattageOnPage * dailyUse)/1000;
    		
    		//Display  and store 1.5 Kwh and pass it on to next function
    		return dailyEnergyConsumed;
            daily.innerHTML = dailyEnergyConsumed;
    		
    }
    	

    	
    /*
    annualEnergyConsumption = function(annualEnergy) {
    	take the variable dailyEnergyConsumed and multiply that by no of days the user enters
    	1.5 kWh × 365 (days) = 547.5 kWh
    	Store it but do not display this
    	Pass it to annual Cost function 
    	*/
    /*
    	var annualEnergy=0;

    	var text = document.getElementById('hour').value;
    	var allYear = document.getElementById('allYear').value;

    	var annualEnergy = dailyEnergyConsumed * text;
    	return annualEnergy;
    	
    	
    }	
    */

    /*
    annualCost = function() {

    	var utilityRate = document.getElementById('utilityRate').value;
    	var button = document.getElementById('annualCost');
    	var annualCostOperation = document.getElementById('annualCostOperation');

    	var annualCost = ( annualEnergy * utilityRate);

    	
    	take var annualEnergy (547.5) K wh from annualEnergyConsumption function 
    	capture what the user enters in Utility Rate textbox (11 cents per K Wh)
    	
    	( Calculate 547.5 kWh × $0.11/kWh = $60.23/year)
    	Click on the button to disaplay it
    	
    	

    }



    */
年度能源消耗和成本计算器
选择类别

选择一个类别 冰箱 洗碗机

选择产品
--------------------------

瓦数
选择类别和产品以查看其瓦数

估计每日使用量 每天1小时不多 平均每天
3小时 每天6小时 每天24小时始终开启


日能耗
0.268千瓦时
每年使用的大约天数

整年
年能耗
547.5千瓦时
输入每千瓦/小时的用电率


年运营成本

请阅读thanks@Ortomala. 我正在读这个。(我最近自学成才,这并不奇怪。)。